解決antd-mobile和css module衝突,css module的使用方式 ...
前言
本文講述css-loader
開啟css模塊
功能之後,如何與引用的npm包中樣式文件不產生衝突。
比如antd-mobile
npm包的引入。在不做特殊處理的前提下,樣式文件將會被轉譯成css module
。
一、產生問題的原因
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
'postcss-loader'
]
}
以上代碼片段,摘自webpack
配置的module.rule
。
可以看出wepack
在編譯過程中,遇到.css
結尾的文件,都會交由postcss-loader
、css-loader
和style-loader
依次處理。
因為css-loader
開啟了css模塊
功能,所以,所有經過處理的css
文件,類名都將被改變。
二、初步改進
使用
exclude
和include
進行區分
1.node_module
文件夾內的文件,避免被當前rule
處理
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
}
如上所示,將node_module
文件夾內的文件,用exclude
排除在外,不用當前rule
進行處理。
2.單獨處理node_module
內的css文件
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
],
include:[path.resolve(__dirname, '..', 'node_modules')]
}
三、升級版,支持css module
模式和普通模式混用
1.用文件名區分兩種模式
- *.global.css
普通模式
- *.css
css module模式
這裡統一用 global
關鍵詞進行識別。
2.用正則表達式匹配文件
// css module
{
test: new RegExp(`^(?!.*\\.global).*\\.css`),
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:6]'
}
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
}
// 普通模式
{
test: new RegExp(`^(.*\\.global).*\\.css`),
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader'
}
],
exclude:[path.resolve(__dirname, '..', 'node_modules')]
}
四、其他問題
less
在使用css module
時,對url
的解析存在衝突,可以用resolve-url-loader
進行解決,直接上代碼:
test: /\.less/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "resolve-url-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}
]
參考
[1] [Updated README regarding relative filepaths issue #121](https://github.com/webpack-contrib/less-loader/pull/121)