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

我正在为本地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’;而是以相同的方式编译。

我究竟做错了什么？

#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 /传递给编译器

#2

我遇到了这个问题, 这为我解决了。取消选中仅跟踪根文件, 默认情况下已选中。