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

Question

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

例如，我想这样写：

@import "~styles/variables";

替代

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

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

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

所有这些都按照我预期的方式工作，并且Webpack可以正确编译Sass。但是WebStorm不理解带有波浪号的导入，并在这个导入中出现错误。

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

我该如何解决这个问题？

- Andrii Golubenko

---

嗨，我遇到了相同的问题。你解决了吗？ - Andrii Romanchak

@AndriiRomanchak 我没有解决这个问题，因为我的webpack配置非常复杂，但是JetBrains团队将webpack配置分析器添加到了WebStorm中，并且它运行良好。请查看https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/ - Andrii Golubenko

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 （上述两个任务单的基础）

- LazyOne

---

刚刚更新到2017.2.4版本，但仍然出现相同的错误。链接显示问题已经修复。 - Andrii Romanchak

@AndriiRomanchak 如果您确定已正确配置但仍无法正常工作，请在适当的工单中提出问题或提交新的工单。 - LazyOne

我的PHPStorm可以理解来自node_modules文件夹的波浪号路径，但无法理解来自src文件夹的路径。我的src被标记为源根目录。你能给予任何建议吗？ - Andrii Romanchak

很遗憾，我没有使用webpack，所以对于这里可以做什么没有任何想法。不过你可以在WebStorm论坛上提问：https://intellij-support.jetbrains.com/hc/en-us/community/topics/200367229-WebStorm - LazyOne

Answer 2

该问题在PHPStorm（可能WebStorm也是）的2017.2.2版本中已得到解决。

有关更多信息，可以在上面提到的这里找到。

别名正常工作，但如果您没有使用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"
    }
  }
};

- Andrii Romanchak