用于SCSS的PhpStorm File Watcher无法编译node_modules

Question

我正在为本地WordPress网站设计自定义主题。我已经在PhpStorm中设置了一个File Watcher，将myTheme/scss/中的scss文件编译为myTheme/style.css。

这可以按预期工作，我在_variables.scss中声明的变量可以在style.css或之后导入的任何文件中使用。

我现在的问题是@import '~foundation-sites/dist/css/foundation.min.css';被编译为@import '~foundation-sites/dist/css/foundation.min.css';而不是实际的CSS内容。

我尝试改用@import '../node_modules/foundation-sites/dist/css/foundation.min.css';，但是编译方式相同。

我在做什么错了？

Answer 1

import语句中的

.css扩展名告诉编译器生成纯CSS导入，而不是将内容拉入其中。请参阅https://github.com/sass/sass/issues/556#issuecomment-397771726以供参考。 我建议将您的导入更改为 @import '../node_modules/foundation-sites/dist/css/foundation'-这应该有所帮助。 请注意，~前缀是SASS编译器不知道的Webpack功能。因此，在文件查看器中使用SASS时，您必须更改相对路径或将--load-path node_modules/传递给编译器

Answer 2

我遇到了这个问题，this为我解决了。取消选中Track only root files，该复选框默认为选中状态。