webpack(带有 sass-loader)-scss 文件 @import 无法识别解析别名 [英] webpack (with sass-loader) - scss file @import does not recognize resolve alias

问题描述

我的项目结构:

webpack.config.js
app--

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

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

在 webpack.config module.exports 中:

In webpack.config module.exports:

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

在我的文件 - myComponent.scss 中:

In my file - myComponent.scss:

@import "styles/variables";

我在构建 bundle.js 时遇到这个错误:

I am getting this error when building bundle.js:

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

如何在 sass 文件中@import 别名?

How can I @import aliases in sass files?

推荐答案

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

I was able to use, on a stylesheet, an alias that I defined in webpack by using the following:

@import '~alias/variables';

正如 ~ 即可为我解决问题="noreferrer">这里

just by prefixing the alias with ~ did the trick for me, as suggested by documentation in here

这篇关于webpack(带有 sass-loader)-scss 文件 @import 无法识别解析别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！