element-plus 自定义命名空间 webpack里的实现

• element-plus官方提供了自定义命名空间功能 但只提供了vite的样例，因为我用的是webpack打包，所以记录下解 决过程

在html里修改命名空间很简单，element-plus官方有样例

• 直接加一个参数传进去

  <template>
  <el-config-provider :locale="locale" namespace="ep">
    <router-view></router-view>
  </el-config-provider>
  </template>
  

  • 在css里修改 因为我的项目组件和函数方法都是自动按需引入，按照官方样例只能实现组件修改，函数方法不能实现

    const AutoImport = require("unplugin-auto-import/webpack")
    const Components = require("unplugin-vue-components/webpack")
    const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")
    
    plugins:[
    ...
    AutoImport({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass',
      })],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ],
  

  后面官方代码库里找到 引入

  const ElementPlus = require('unplugin-element-plus/webpack')
  
  plugins:[
   ...
   AutoImport({
     resolvers: [ElementPlusResolver({
       importStyle: 'sass',
     })],
   }),
   Components({
     resolvers: [ElementPlusResolver()],
   }),
   ElementPlus({
     useSource: true,
   }),
   ],
  

  最后加一个sass文件

  // styles/element/index.scss
   // we can add this to custom namespace, default is 'el'
   @forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'
   );
  

  • 然后sass-loader里全局引入这个文件

  module:{
    rules:[
       {
    test: /\.(css|scss|sass)$/,
    use: [
      {
        loader: "sass-loader",
        options: {
          implementation: require("sass"),
          additionalData: `@use "@/styles/element/index.scss" as *;`,
        },
      },
    ],
  },
  
  

  这样就实现了element-plus的自命名空间的功能 可以任意修改全局类名 避免和项目已有类名冲突