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

jv4diomz 于 2023-02-04 发布在 Webpack

关注(0)|答案(2)|浏览(186)

我正在使用PhpStorm 2018.2进行一个Angular 项目（使用Webpack 4.16构建）
我在webpack中设置别名来导入scss文件，如下所示：

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

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

@import '~styles/variables';

从网络包的Angular 来看，它运行得很好。但是PhpSotrm给了我一个错误：

这是PhpStorm（I can see clearly here that this should be working for Webstorm）中缺少的功能吗
This question描述了webstorm上的问题，但我找不到PhpStorm的任何解释。
那么，是我做错了什么，还是PhpStorm中的一个bug？

根据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设法找到我的变量.scss位于/src/styles文件夹中，而webpack中没有定义别名....

webpack

来源：https://stackoverflow.com/questions/51610385/phpstorm-does-not-recognise-sass-files-imported-with-usage-webpack-aliases

2条答案

按热度按时间

v09wglhw1#

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

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

以上代码仅用作示例。

赞(0）回复(0）举报 2023-02-04

hfwmuf9z2#

我把这个添加到我的配置中，以包括根路径（这是2个文件夹了）

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Add the path from this file to the folder from where you want to do an @import from
        includePaths: ['./../../'],
      },
    },
  },
}

然后去掉波浪号

@import 'top/level/folder/to/styles/';

对我来说很有用，但是./../../对我来说也是整个项目的根。也许它对我有用的原因是这个文件夹是根。所以PHPSorm总是识别根路径。

赞(0）回复(0）举报 2023-02-04

我来回答

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

2条答案

相关问题

热门标签

最新问答