css import 使用 alias 相对路径

亦凉 2022-05-19 12:16 282阅读 0赞

> webpack 中的[模块路径][Link 1]是非常好用的特性，然而有时候我们也想在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';

结果

![这里写图片描述][70]

这是因为 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')
                        }
                    }
                }
                ]
            }
        ]
    }

[Link 1]: https://www.webpackjs.com/concepts/module-resolution/#%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84
[70]: /images/20220519/7f91ca18707946429eb68c5587498593.png