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

Posted 2023-02-22

【中文标题】PhpStorm 无法识别使用 webpack 别名导入的 Sass 文件

【英文标题】：PhpStorm does not recognise Sass files imported with usage webpack aliases

【发布时间】：2019-01-07 16:09:31

【问题描述】：

我将 phpStorm 2018.2 用于 Angular 项目（使用 Webpack 4.16 构建）

我在 webpack 中设置了别名来导入 scss 文件，如下所示：

resolve: 
  alias: 
    'styles': `$helpers.root('src/styles/')`
  ,

在我的 scss 文件中，我可以这样导入：

@import '~styles/variables';

从 vue 的 webpack 角度来看，它运行良好。但是 PhpSotrm 给了我一个错误：

这是 PhpStorm 中缺少的功能吗 (I can see clearly here that this should be working for Webstorm)

This question 在 webstorm 上描述了这个问题，但我找不到 PhpStorm 的任何解释。

那么我做错了什么还是 PhpStorm 中的错误？

按照 Ru 的回答进行编辑：

1 如果我将 webpack.config.js 更改为

resolve: 
  alias: 
    '#styles': `$helpers.root('src/styles/')`
  ,

以及scss文件中的代码：

@import '#styles/_variables';

错误将从 phpStorm 中消失，但 webpack 引发错误：

@import '#styles/_variables';
^
      File to import not found or unreadable: #styles/_variables.

2) 如果我使用另一个符号（我尝试了 @ 和 $ 和 % 和 &）或没有符号，webpack 会引发错误，而 phpStorm 会引发错误...

3) 如果我使用~，它不会使用 webpack 别名（我删除了 webpack 别名并且它可以工作），所以很明显有些东西我没有在这里得到。 当 webpack 中没有定义别名时，为什么 webpack 设法在 /src/styles 文件夹中找到我的 variables.scss....

【问题讨论】：

用~ 为别名路径添加前缀是正确的方法，您的导入应该可以正常工作...部分文件（名称以下划线开头的文件）存在一个已知问题：如果下划线是导入中省略，并且正在使用别名，无法解析导入 (youtrack.jetbrains.com/issue/WEB-32760)。但是像 `@import '~styles/_variables' 这样的导入应该仍然有效。如果您在解决问题时遇到问题，请创建支持票

【参考方案1】：

~ 是node_modules 文件夹的别名，因此在这种情况下，您使用了两个程序可能无法理解的别名。您应该尝试为别名的样式添加符号前缀。例如。 #styles 然后你可以使用@import '#styles/variables';

resolve: 
  alias: 
    '#styles': `$helpers.root('src/styles/')`
  ,

以上代码仅作为示例。

【讨论】：

需要在导入路径前加上~，见webpack.js.org/loaders/sass-loader/#imports，***.com/questions/34717203/…；像@import '~alias/file_name'; 这样的导入应该由IDE解决

@Tonio 我可以与您核实一下您是否将path 作为软件包安装在devDependencies 中？如果是这样，我会继续修改我的答案以进行适当的修复:)

我没有安装名为 path 的包，但是，如果我执行“const path = require('path');”在 webpack.config.js 中，我将获得“node”包中定义的路径实例（我认为）