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

Question

我正在将PhpStorm 2018.2用于Angular项目（使用Webpack 4.16构建）

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

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

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

@import '~styles/variables';

从webpack的角度来看，它的工作原理很棒。 但是PhpSotrm给我一个错误：

这是PhpStorm中缺少的功能吗（ 我可以在这里清楚地看到这应该适用于Webstorm ）

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

那么我是在做错事，还是PhpStorm中的错误？

编辑以下茹的答案：

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文件夹中找到我的variable.scss。

Answer 1

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

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

仅将以上代码用作示例。