Jan 19, 2021

ant-design-vue 自定义 class 前缀（Vue cli 配置）

用 prefixCls 属性避免局样式污染

给 CSS class 加上自定义的样式前缀，可以保证在组件化，微前端等场景避免集成时的全局样式污染。

版本依赖：

@vue/cli: 4.5.6
ant-design-vue: 2.0.0-rc.8
babel-plugin-import: 1.13.3 - 用来处理 ant design vue 的组件按需引入
less: 4.1.0 - ant-design-vue依赖 less
less-loader: 7.2.1 - webpack loader，用来编译转换 .less

第一步：babel.config.js

配置组件按需引入，style 设置为 true

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }]],
}

第二步： vue.config.js

@ant-prefix 是 ant-design 的 less 全局变量(👆见此)，用来给所有的组件 class 加前缀，默认是ant，比如 button 上的 class 默认是 ant-btn。通过 modifyVars 属性修改 ant-prefix 的值，比如改成 ‘abc’，最终编译出来的 class 就会变成 abc-btn。推荐把前缀改成 package.json 中的name 属性，方便快捷，可以统一配置，省去字符串硬编码。

const { name } = require('./package.json')

module.exports = {
  css: {
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        lessOptions: {
          modifyVars: {
            'ant-prefix': name,
          },
          javascriptEnabled: true,
        },
      },
    },
  },
  // 其他配置...
}

第三步：配置 ConfigProvider

导入 ant-design-vue 的 ConfigProvider 组件，配置 prefixCls 属性，注意要和上一步中 webpack 配置中的 ant-prefix 值一致，这里统一用 package.json 中的 name 字段。

import { createApp } from 'vue'
import { ConfigProvider } from 'ant-design-vue'
import { name } from '../package.json'

createApp(
    <ConfigProvider prefixCls={name}>
      <App />
    </ConfigProvider>
  ).mount('#app')
}

大功告成。

#blog #devNotes