webpack（使用sass-loader）- scss文件@import无法识别解析别名。

Question

我的项目结构：

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

在 webpack.config.js 文件的 module.exports 中：

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

在我的文件中 - myComponent.scss：

@import "styles/variables";

构建bundle.js时出现以下错误：

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

我该如何在Sass文件中@import别名？

- tome

---

也许添加有关项目目录结构的信息，特别是提到的文件，会有所帮助。 - Nikos Paraskevopoulos

将项目结构添加到问题中。 - tome

一个非常快的观察 - 可能不相关：目录 styles 在别名 alias.styles 中被包含为 path.join(..., 'app/styles')，并且在导入中作为 @import "styles/variables"。它可能需要是 @import "variables"。 - Nikos Paraskevopoulos

@NikosParaskevopoulos 这就是在 webpack 中定义和使用别名的方式 - https://webpack.github.io/docs/configuration.html#resolve-alias - tome

你找到解决方案了吗？ - Tarlen

@Tarlen - 没有解决方案。目前我只是在Sass文件导入中使用相对路径，而不引用别名。 - tome

Answer 1

我能够在样式表中使用webpack中定义的别名，方法如下：

@import '~alias/variables';

如文档此处所建议的，仅需在别名前加上~即可，这对我很有帮助。

- BenR

---

这个方法很好，但是你如何让编辑器不再抱怨它呢？显然，别名目录不存在。 - tkiethanom

@tkiethanom，对于你和其他看到这个答案的人，请参考CrocoDillon的答案。基本上，如果你的配置文件与他的完全相同，你可以使用：@import '~styles/variables';。 - A. L

@tkiethanom 不确定其他编辑器，但 IntelliJ/PhpStorm 将使用 webpack.config.js 来解析导入，因此它可以识别别名。 - Nathan

使用~已经过时，可以从您的代码中删除。 - higimo

Answer 2

另一个与此相关的修复措施，是移除 .scss。

@import '~scss/common.scss';

应该是

@import '~scss/common';

- Kirk Strobeck

---

2018年，我遇到了困难。我正在使用@material包，但它们都没有波浪符号（~）！因此，sass-loader在后续导入时会卡住。尝试添加一个别名@material并指向path.resolve(__dirname, 'node_modules/@material')，但没有成功。我在stackoverflow上提出了一个问题：https://stackoverflow.com/questions/48368639/vue-and-webpack-file-to-import-not-found-or-unreadable-material-ripple-commo - user3794166

Answer 3

在我的情况下，依赖项是一个节点模块，因此我可以像这样导入它：

@import '~node-module-name/variables';

当使用实际的节点模块目录名称时，我的编辑器（PhpStorm）不再显示未解决的路径错误（@tkiethanom提到的问题）。看起来如果我想要使用Sass风格的导入（例如my-package/colors而不是my-package/_colors.scss），我需要在webpack配置中指定别名。而且似乎无论该别名的名称是什么，只要我使用节点模块目录名称即可。

- gedijedi

Answer 4

既然你的webpack.config.js文件已经在/app文件夹中，那么别名应该是：

resolve: {
   alias: {
       styles: path.join(__dirname, 'styles') 
   }
}

?

- CrocoDillon

---

抱歉，那是一个错误。Webpack.config在顶级目录上，已相应地编辑问题。 - tome

好的，我已经想到这会太容易了。我本来想评论而不是回答，但是我的声望还不够。 - CrocoDillon