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

Answer 1

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

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

仅将以上代码用作示例。