Bourbon with webpack：WebStorm 抱怨没有在 IDE 中解析 bourbon答案

【问题标题】：Bourbon with webpack: WebStorm complains about not resolving bourbon in IDEBourbon with webpack：WebStorm 抱怨没有在 IDE 中解析 bourbon
【发布时间】：2016-11-21 23:38:35
【问题描述】：

我已经设法使用 webpack 配置和使用波旁威士忌。我刚刚在 sass 加载程序中包含以下内容

&includePaths[]=' + bbPath

在 SCSS 文件中我只是这样做

 @import "bourbon";

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

问题是，在 WebStorm IDE 中，上面的 @import 行表示波旁威士忌无法解析。

我试过了

@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 是有效的？

【问题讨论】：

如果您的项目中有 Bourbon，请尝试将其标记为资源根（在项目视图中右键单击它 - 标记为资源根）。

标签： sass webpack webstorm bourbon sass-loader

【解决方案1】：

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

WebStorm 文件菜单 --> 首选项 --> 目录 --> 右键单击您的 node_modules 目录并检查资源根选项。

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

【讨论】：

有效！注意：从 PhpStorm 2021.2 开始，您必须按照答案中描述的方式进行操作，而不是通过从项目视图的上下文菜单中标记目录，因为没有选项将 node_modules 标记为根资源目录跨度>