java webpack web项目_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文件，类名都将被改变。

二、初步改进

使用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]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本文标题: webpack项目轻松混用css module的方法

本文地址: http://www.cppcns.com/ruanjian/java/229984.html