sass - 带 webpack 的波本威士忌 : WebStorm complains about not resolving bourbon in IDE

Question

我已经成功地使用 webpack 配置并开始使用 bourbon。我刚刚在 sass 加载器上添加了以下内容

&includePaths[]=' + bbPath

在 SCSS 文件中我只是这样做

 @import "bourbon";

我现在可以工作了，因为我通过 scss 文件调用 mixins 并且看到了输出，而且 webpack 也没有提示。

问题是，在 WebStorm IDE 中，它指出上述 @import 行无法解析 bourbon。

我尝试这样做

@import "~bourbon";

这让 WebStorm 很高兴，但 webpack 失败了

Module build failed:
var path = require('path');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
      in /Users/test/node_modules/bourbon/index.js (line 1, column 1)

也许这里的错误是 WebStorm，有什么方法可以强制 WebStorm 理解 @import bourbon 是有效的吗？

Answer 1

我相信你可以通过告诉Webstorm根资源路径来控制所有scss文件的路径。

WebStorm 文件菜单 --> 首选项 --> 目录 --> 右键单击​​您的 node_modules 目录并选中“资源根”选项。

一旦设置完毕，WebStorm IDE 就会知道您导入的 @'bla-bla' 文件。