这是一个允许你使用类函数的方式生成css的webpack插件,支持webpack4.0,webpack5.0。只需要简单的配置,就可以将.html,.vue,.jsx,.tsx文件中的类名转化成css样式。
- 在项目启动或者文件变动时,获取文件中已固定规则创建的class
- 将class解析出‘函数名’、‘参数’
- 调用函数生成css
npm install class2style-webpack-plugin
//webpack.base.js
const Class2styleWebpackPlugin = require('class2style-webpack-plugin');
module.exports = {
.....
plugins: [
.....
new Class2styleWebpackPlugin({
ruleConfigPath:'classToStyle.js',
output:'src/index.css',
folderPath:'src',
})
....
],
}
参数名 | 是否必填 | 类型 | 说明 |
---|---|---|---|
prefix | 非必填 | string | class前缀,插件只会匹配以此开头的class,默认为cts |
ruleConfigPath | 必填 | string | 生成规则配置文件路径 |
output | 必填 | string | 输出css位置文件 |
folderPath | 非必填 | string | 指定扫描的文件夹,默认src |
生成规则配置文件导出一个ClassToStyle类,在类中定义样式生成的方法
class ClassToStyle{
//宽度
width(value){
return {
width:`${value}px`
}
};
//矩形
rectangle(width,height){
return {
width:`${width}px`,
height:`${height}px`
}
};
//颜色
color(color){
return {
color:`${color}`,
}
};
}
module.exports =ClassToStyle;
插件的class命名规则示例
<div class="cts__rectangle__100_10 cts__color__red">
<div class="cts__width__10">标题</h2>
</div>
'cts'为前缀,'rectangle'、'color'、‘width’为方法名,对应生成规则配置文件中的方法,’100_10‘,’red‘,’10‘为参数,多个参数以“_”分隔。前缀、方法名、参数以“__”分隔