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.