css import 使用 alias 相对路径

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zwkkkk1/article/details/81200791

webpack 中的模块路径是非常好用的特性，然而有时候我们也想在CSS、SCSS中用到模块路径却一直会提示错误找不到文件，下面直接上代码和解决方案。

示例代码

首先我们在 webpack.config.js 中设置

const path = require("path");
module.exports = {
    //其他的配置就省略了
    ...,
    resolve: {
        alias: {
            css: path.join(__dirname, "src/css");
        }
    }
}

这样我们在 js 文件中用

import 'css/variables.css'; 

就可以轻松引到 variables.css 文件，然而我们在 css 中也想这样写路径结构，那就依样画葫芦吧

@import 'css/variables.css';

结果

  这是因为 webpack 在接收到 css、scss、less 会通过我们设置的各种 loader 进行编译。
  css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias，所以会报找不到 css 目录。

解决方案

方案1

保留之前在 module.resolve 中的配置，css 文件写路径时这样写

@import "~css/variables.css"

Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 css 的 alias 配置就能生效了。

方案2

删去示例代码中在 module.resolve 的配置，在设置 loader 的时候进行配置，原对 .css 的配置代码：

webpack.config.js

//省略其他的配置
...,
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

进行扩展配置后的配置代码：

//省略其他的配置
...,
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 
            {
                loader: 'css-loader',
                options: {
                    alias: {
                        'css': path.join(__dirname, 'src/css')
                    }
                }
            }
            ]
        }
    ]
}