用scc-loader实现模块化css编程
程序员文章站
2022-06-12 16:48:53
...
css模块化在项目中越来越被重视，前段时间应项目组成员要求，实现一个css模块化的demo参考，今日将其分享出来
众所周知css语言是不具备模块画的能力，但是借助webpack的css-loader来实现，其核心就是css-loader的modules属性
新建a.css文件：
:global .border-red{
border:1px solid red;
};
*{
padding:0;
}
:local .div1{
composes:mydiv from './b.css';
background-color: red;
display: flex;
};
上面定义用到了:global 和:local还有composes:分别对应模块化全局，本地，还有集继承
b.css
.mydiv{
width:50px;
height:50px;
border:1px solid var(--mainColor);
}
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv" class='div1'></div>
<div class='div1 img1'></div>
</body>
</html>
webpack中css-loader的配置
test:/\.css$/,
use:[
{
loader: minicss.loader,
},
{
loader:'css-loader' ,
options:{
//minimize:true,
modules:{
localIdentName:'[path]_[name]_[local]_[hash:4]',
//import
//minimize
}
}
}
},
在打包入口文件中我们必须通过js将打包后的css模块与页面dom进行绑定，否则无法使用。
app.js
import test from './css/test.css';
import test2 from './css/test2.css';
document.getElementById('mydiv').setAttribute('class',test.div1);
注意绑定后的css名称哦** localIdentName:'[path]_[name]_[local]_[hash:4]',**
命名规则如上。
另外webpack之前的css-loader中的modules与localIdentName是同级别的属性，但4之后归于modules的配置属性处理了。
上一篇： 用函数实现模块化设计
下一篇： 对象写入二进制文件