SCSS 的 PhpStorm 文件观察器未编译 node_modules答案

【问题标题】：PhpStorm File Watcher for SCSS not compiling node_modulesSCSS 的 PhpStorm 文件观察器未编译 node_modules
【发布时间】：2019-02-27 19:59:02
【问题描述】：

我正在为我的本地 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';，但编译方式相同。

我做错了什么？

【问题讨论】：

不确定我是否关注您...您是否希望将foundation.min.css 复制到您的结果.css 而不是添加为@import？还是？
是的，我希望@import '~foundation-sites/dist/css/foundation.min.css'; 输出其内容而不是@import 字符串。
请看下面我的回答

标签： wordpress sass wordpress-theming phpstorm

【解决方案1】：

.css import 语句中的扩展告诉编译器生成纯 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】：

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

【讨论】：

我从一开始就关闭了这个选项。