webpack项目轻松混用css module的方法

webpack项目轻松混用css module的方法

前言

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。

比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成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文件，类名都将被改变。

二、初步改进

使用SjcPYnexclude和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: thttp://rue,

localIdentName: '[hash:base64:6]'

}

},

{

loader: 'postcss-loader'

}

],

exclude:[path.resolve(__dirname, '..', 'node_modules')]

}

// 普通模式

{

test: new RegExp(`^(.*\\.global).*\\.css`),

use: [

{

loader: 'style-loader'

}，

{

loader: 'css-loSjcPYnader',

},

{

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]

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。