Question

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

即。我想写

@import "~styles/variables";

而不是

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

为此，我使用了＃style;＆＃39; style＆＃39;我的webpack配置中的目录

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

这一切都按我的预期工作，webpack正确编译Sass。但WebStorm不理解使用波浪号导入，并强调此导入错误。

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

我该如何解决这个问题？

Answer 1

当前版本（2017.1 ATM）目前不支持此类解析。

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

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

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文件

2 个答案: