版权声明:本文为博主原创文章,未经博主允许不得转载。 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')
}
}
}
]
}
]
}