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

Question

我的项目结构：

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 别名？

Answer 1

因为你的 webpack.config.js 文件已经在 /app 文件夹中，别名不应该是：

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

?

Answer 2

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

@import '~alias/variables';

正如 here

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

Answer 3

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

@import '~scss/common.scss';

应该是

@import '~scss/common';

Answer 4

在我的例子中，依赖项是一个节点模块，因此我可以这样导入它：

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

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

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

webpack (with sass-loader) - scss file @import does not recognize resolve alias

sass

webpack

autoprefixer

sass-loader