1.0.0 • Published 2 years ago
css-prefixer-plugin v1.0.0
cssPrefixerPlugin
描述
因业务上需要,需要对样式文件添加自定义前缀.
比如打包后的目录结构如下:
dist
css
app.77d2da57.css
chunk-vendors.50ad22ca.css
js
fonts
组件库的所有样式都被打包进入了chunk-vendors.50ad22ca.css
文件中,但业务上的需求,需要将该文件的所有样式规则前面加一个自定义前缀.
css-prefixer-plugin
插件可轻松实现此需求,只要配置好前缀的名称和被操作的文件名,css-prefixer-plugin
会自动将该文件下的样式规则转换成需要的样子.
安装
项目下运行yarn add css-prefixer-plugin -D
安装插件
配置
vue
框架下的配置方式.在项目根目录vue.config.js
添加如下配置.
const cssPrefixerPlugin = require("css-prefixer-plugin");
module.exports = {
chainWebpack:config =>{
config
.plugin("css-prefixer-plugin")
.use(cssPrefixerPlugin)
.tap((args)=>{
args = [
{
prefix:".ant-vue",
packageName:"chunk-vendors"
}
];
return args;
})
.end();
}
}
配置中需要添加两个核心参数:
- prefix: 要添加的前缀名称,必填项.
- packageName: 需要操作的样式文件名,非必填,默认值为
chunk-vendors
.
1.0.0
2 years ago