WebStorm 无法识别使用 webpack 别名导入的 Sass 文件答案

【问题标题】：WebStorm does not recognize Sass files imported with usage webpack aliasesWebStorm 无法识别使用 webpack 别名导入的 Sass 文件
【发布时间】：2017-09-05 13:35:11
【问题描述】：

我在我的项目中使用带有sass-loader 的 webpack 2，我需要在组件样式文件中导入一些全局 Sass 文件（在我的案例中是带有 Sass 变量的文件）。我不想为全局文件写相对路径，而不是这个我想使用绝对路径。

即我要写

@import "~styles/variables";

而不是

@import "../../../variables"

为此，我在我的 webpack 配置中为“样式”目录使用别名

resolve: {
 ...
  alias: {
    'styles': helpers.root('src/styles'),
  }
}

所有这些都按我的预期工作，并且 webpack 可以正确编译 Sass。但是 WebStorm 不理解带波浪号的导入，并用错误强调此导入。

我已经在 WebStorm 设置中指出 src 是我的源根目录。

我该如何解决这个问题？

【问题讨论】：

您好，遇到同样的问题。你解决了吗？
@AndriiRomanchak 我没有解决这个问题，因为我有非常复杂的 webpack 配置，但是 JetBrains teem 将 webpack 配置分析器添加到 WebStorm 并且它工作正常。看blog.jetbrains.com/webstorm/2017/06/…

标签： javascript css sass webpack webstorm

【解决方案1】：

当前版本 (2017.1 ATM) 目前不支持此类解析。

观看这些票（星号/投票/评论）以获取有关任何进展的通知。

萨斯：https://youtrack.jetbrains.com/issue/WEB-25321
少：https://youtrack.jetbrains.com/issue/WEB-23707
更通用的票：https://youtrack.jetbrains.com/issue/WEB-17533（前 2 张票的基数）

【讨论】：

刚刚更新到 2017.2.4 版，仍然出现同样的错误。链接说问题已解决
@AndriiRomanchak 如果您确定所有配置正确但仍然无法正常工作，请在相应的票证中询问或提交新票证。
我的 PHPStorm 理解来自 node_modules 文件夹的路径的波浪号，但不理解来自 src 文件夹的路径。我的src 被标记为源根。你有什么建议吗？
@AndriiRomanchak 不幸的是，我根本没有使用 webpack，所以不知道可以在这里做什么。你可以在 WebStorm 论坛上提问：intellij-support.jetbrains.com/hc/en-us/community/topics/…

【解决方案2】：

自 2017.2.2 版本以来，该问题已在 PHPStorm（也可能是 WebStorm）中得到修复。

更多信息可以在上面提到的here找到。

别名可以正常工作，但如果您不使用Webpack（例如，您有一个Angular CLI 项目），您可以在项目的根目录中创建一个假的webpack.config.js 文件并用适当的别名填充它，以使IDE 解析您的文件。

下面是工作示例：

// fake webpack config used only to help make PHPStorm resolve imported .sass files
var webpack = require('webpack');

module.exports = {
  context: __dirname,

  // Directory resolution fix
  resolve: {
    alias: {
      sass: "/src/sass"
    }
  }
};

【讨论】：