webpack (with sass-loader) - scss 文件 @import 无法识别解析别名答案

【问题标题】：webpack (with sass-loader) - scss file @import does not recognize resolve aliaswebpack (with sass-loader) - scss 文件 @import 无法识别解析别名
【发布时间】：2018-08-29 22:32:27
【问题描述】：

我的项目结构：

webpack.config.js
app--

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

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

在 webpack.config 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 别名？

【问题讨论】：

也许添加有关项目目录结构的信息，尤其是提到的文件，会有所帮助。
为问题添加了项目结构
一个非常快速的观察 - 可能无关紧要：目录 styles 包含在 alias.styles 中作为 path.join(..., 'app/styles') 和在导入中作为 @import "styles/variables"。可能需要@import "variables"。
@NikosParaskevopoulos 这就是在 webpack 中定义和使用别名的方式 - webpack.github.io/docs/configuration.html#resolve-alias
您找到解决方案了吗？

标签： sass webpack autoprefixer sass-loader

【解决方案1】：

由于您的 webpack.config.js 文件已经在 /app 文件夹中，别名不应该是：

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

【讨论】：

对不起，这是一个错误。 Webpack.config 位于顶层目录，相应地编辑了问题
好的，已经认为这太容易了。我会发表评论而不是回答但没有足够的代表。

【解决方案2】：

我可以在样式表上使用我在 webpack 中定义的别名，方法是：

@import '~alias/variables';

正如here 中的文档所建议的那样，只需在别名前面加上~ 就可以解决问题

【讨论】：

这很好用，但是你如何让你的编辑停止抱怨它。显然 ~alias 目录不存在。
@tkiethanom 对于您和遇到此答案的任何其他人，请参阅 CrocoDillon 的答案。基本上，如果您的配置文件看起来与他的完全相同，您将使用：@import '~styles/variables';
@tkiethanom 不确定其他编辑器，但 IntelliJ/PhpStorm 将使用 webpack.config.js 来解析导入，因此它可以识别别名。
使用 ~ 已弃用，可以从您的代码中删除。

【解决方案3】：

与此主题相关的另一个修复，删除.scss

@import '~scss/common.scss';

应该是

@import '~scss/common';

【讨论】：

2018 并坚持这一点。我正在使用@material 包，它们都没有波浪字符！！所以 sass-loader 会卡在后续的导入中。尝试为@material 添加别名并指向path.resolve(__dirname, 'node_modules/@material')，但没有成功。问了一个问题stackoverflow.com/questions/48368639/…

【解决方案4】：

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

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

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

【讨论】：