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

Question

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

即我要写

@import "~styles/variables";

而不是

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

为此，我在我的 webpack 配置中为 'styles' 目录使用了别名

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

所有这一切都如我所料，并且 webpack 可以正确编译 Sass。但是 WebStorm 不理解带有波浪号的导入，并且会错误地强调此导入。

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

我该如何解决这个问题？

Answer 1

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

观看这些票证 (star/vote/comment) 以获得有关任何进展的通知。

Sass: https://youtrack.jetbrains.com/issue/WEB-25321
少：https://youtrack.jetbrains.com/issue/WEB-23707
更通用的门票：https://youtrack.jetbrains.com/issue/WEB-17533（前两张门票的基础）

Answer 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"
    }
  }
};

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

WebStorm does not recognize Sass files imported with usage webpack aliases

javascript

css

sass

webstorm

webpack