介绍 {,
,,测试:/\ . css/美元,
,,使用:[
,,,& # 39;style-loader& # 39;
,,,{
,,,,,装载机:,& # 39;css-loader& # 39;
,,,,,选择:,{
,,,,,,,模块:,真的,
,,,,,,,localIdentName:, & # 39;(散列:base64:6] & # 39;
,,,,,}
,,,},
,,,& # 39;postcss-loader& # 39;
),才能
} {,
,,测试:/\ . css/美元,
,,使用:[
,,,{
,,,,,装载机:,& # 39;style-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;css-loader& # 39;
,,,,,选择:,{
,,,,,,,模块:,真的,
,,,,,,,localIdentName:, & # 39;(散列:base64:6] & # 39;
,,,,,}
,,,},
,,,{
,,,,,装载机:,& # 39;postcss-loader& # 39;
,,,}
,,,
排除才能:[path.resolve (__dirname, & # 39; . . & # 39;,, & # 39; node_modules& # 39;))
} {,
,,测试:/\ . css/美元,
,,使用:[
,,,{
,,,,,装载机:,& # 39;style-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;css-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;postcss-loader& # 39;
,,,}
,,,
包括:才能[path.resolve (__dirname, & # 39; . . & # 39;,, & # 39; node_modules& # 39;))
} <李> //, css 模块
{,
,,测试:new 正则表达式(“^ (? ! * \ \ .global)。* \ \ . css”),
,,使用:[
,,,{
,,,,,装载机:,& # 39;style-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;css-loader& # 39;
,,,,,选择:,{
,,,,,,,模块:,真的,
,,,,,,,localIdentName:, & # 39;(散列:base64:6] & # 39;
,,,,,}
,,,},
,,,{
,,,,,装载机:,& # 39;postcss-loader& # 39;
,,,}
,,,
排除才能:[path.resolve (__dirname, & # 39; . . & # 39;,, & # 39; node_modules& # 39;))
}//,普通模式
{,
,,测试:new 正则表达式(“^ (. * \ \ .global)。* \ \ . css”),
,,使用:[
,,,{
,,,,,装载机:,& # 39;style-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;css-loader& # 39;
,,,},
,,,{
,,,,,装载机:,& # 39;postcss-loader& # 39;
,,,}
,,,
排除才能:[path.resolve (__dirname, & # 39; . . & # 39;,, & # 39; node_modules& # 39;))
} 测试:,/\ .less/,
用途:,(
{才能
,,,装载机:,“style-loader"
,,},
{才能
,,,装载机:,“css-loader",,
,,,选择:,{
,,,,,sourceMap:,真的,
,,,,,importLoaders: 2
,,,}
,,},
{才能
,,,装载机:,“postcss-loader",,
,,,选择:,{
,,,,,sourceMap:真实
,,,}
,,},
{才能
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家介绍怎么在webpack项目中实现css与模块的混用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>一、产生问题的原因
以上代码片段,摘自webpack配置的module.rule。
可以看出wepack在编译过程中,遇到。css结尾的文件,都会交由postcss-loader, css-loader和style-loader依次处理。
因为css-loader开启了css模块功能,所以,所有经过处理的css文件,类名都将被改变。
<强>二、初步改进
使用排除和包含进行区分
<强> 1. node_module文件夹内的文件,避免被当前规则处理
如上所示,将node_module文件夹内的文件,用排除排除在外,不用当前规则进行处理。
<强> 2。单独处理node_module内的css文件
<强>三、升级版,支持css模块模式和普通模式混用
<强> 1。用文件名区分两种模式
* .global。css普通模式
<李>*。css css模块模式
这里统一用全球关键词进行识别。
<强> 2。用正则表达式匹配文件
<强>四,其他问题
少在使用css模块时,对url的解析存在冲突,可以用resolve-url-loader进行解决,直接上代码:
