Element-UI更改命名空间

目录

第一种情况：webpack配置

1.安装依赖：

2.webpack.base.conf.js文件修改

3.根目录下添加postcss.config.js，文件​编辑文件代码：

4.样式文件目录添加postcss.config.js文件​编辑

5.根据需要，做样式前缀替换的目录下都要添加postcss.config.js文件

第二种情况：vue-cli配置

1.安装依赖

2.vue.config.js文件修改，组件上类名替换命名空间

3.在根目录下创建postcss.config.js文件

---

第一种情况：webpack配置

1.安装依赖：

"postcss-change-css-prefix": "^1.0.4",

"postcss-loader": "^3.0.0",

"change-prefix-loader": "^1.0.5",

2.webpack.base.conf.js文件修改

rules添加如下代码：

/
{
  test: /\.js$/,
  loader: 'change-prefix-loader',
  include: path.resolve(__dirname, '../node_modules/element-ui/lib'),
 // include: [resolve('node_modules/element-ui/lib')],
  options: {
    replace: 'aa-' // aa-替换el-
  }
},
{
  test: /\.(css|scss)$/i,
  include: [resolve('@/styles')], //样式文件位置 resolve('node_modules/element-ui/packages/theme-chalk/src')
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'scss-loader',
  ],
},
//

1. 3.根目录下添加postcss.config.js，文件文件代码：

   const addCssPrefix = require('postcss-change-css-prefix')
   module.exports = {
     plugins: [
       addCssPrefix({
         prefix: 'el-',
         replace: 'aa-'
       })
     ]
   }

   4.样式文件目录添加postcss.config.js文件

2. 5.根据需要，做样式前缀替换的目录下都要添加postcss.config.js文件

   示例：

排查问题：postcss-change-css-prefix插件中依赖的postcss版本（7.0.39）与webpack（3.10.0）版本对应

第二种情况：vue-cli配置

1.安装依赖

"change-prefix-loader": "^1.0.5",

"postcss-change-css-prefix": "^1.0.4",

2.vue.config.js文件修改，组件上类名替换命名空间

chainWebpack: config => {
    config.module
        .rule('change-prefix')
        .test(/\.js$/)
        .include.add(path.resolve(__dirname, './node_modules/element-ui/lib'))
        .end()
        .use('change-prefix')
        .loader('change-prefix-loader')
        .options({
          prefix: 'el-',
          replace: 'gp-'
        })
        .end()
},

3.在根目录下创建postcss.config.js文件

文件内容如下：

const addCssPrefix = require('postcss-change-css-prefix')
module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'gp-',
    }),
  ],
}

.scss样式文件引用

/* 改变 icon 字体路径变量，必需 */

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";