vue2 element 换肤,不引入css 排除element css

需求:

element换肤

实现:

1.build的时候不打包 element 的css

2.根据 配置不同 使用js引入 不同的element 主题css.

坑:

逻辑上很简单,但是坑就坑在 如何在打包的时候 不引入element css

网上的方案基本都尝试了 都无效

我的环境版本:

vue-cli@2.9.6 element-ui@2.15.12

D:\www\vue>npm ls
cesi@1.0.0 D:\www\vue
+-- @babel/preset-env@7.21.4
+-- autoprefixer@7.2.6
+-- axios@1.2.1
+-- babel-core@6.26.3
+-- babel-eslint@8.2.6
+-- babel-helper-vue-jsx-merge-props@2.0.3
+-- babel-jest@21.2.0
+-- babel-loader@7.1.5
+-- babel-plugin-component@1.1.1
+-- babel-plugin-dynamic-import-node@1.2.0
+-- babel-plugin-syntax-jsx@6.18.0
+-- babel-plugin-transform-es2015-modules-commonjs@6.26.2
+-- babel-plugin-transform-runtime@6.23.0
+-- babel-plugin-transform-vue-jsx@3.7.0
+-- babel-preset-env@1.7.0
+-- babel-preset-stage-2@6.24.1
+-- babel-register@6.26.0
+-- chalk@2.4.2
+-- chromedriver@2.46.0
+-- copy-webpack-plugin@4.6.0
+-- cross-spawn@5.1.0
+-- css-loader@0.28.11
+-- element-ui@2.15.12
+-- eslint-config-standard@10.2.1
+-- eslint-friendly-formatter@3.0.0
+-- eslint-loader@1.9.0
+-- eslint-plugin-import@2.26.0
+-- eslint-plugin-node@5.2.1
+-- eslint-plugin-promise@3.8.0
+-- eslint-plugin-standard@3.1.0
+-- eslint-plugin-vue@4.7.1
+-- eslint@4.19.1
+-- extract-text-webpack-plugin@3.0.2
+-- file-loader@1.1.11
+-- friendly-errors-webpack-plugin@1.7.0
+-- html-webpack-plugin@2.30.1
+-- jest-serializer-vue@0.3.0
+-- jest@22.4.4
+-- nightwatch@0.9.21
+-- node-notifier@5.4.5
+-- optimize-css-assets-webpack-plugin@3.2.1
+-- ora@1.4.0
+-- portfinder@1.0.32
+-- postcss-import@11.1.0
+-- postcss-loader@2.1.6
+-- postcss-url@7.3.2
+-- qrcodejs2@0.0.2
+-- rimraf@2.7.1
+-- selenium-server@3.141.59
+-- semver@5.7.1
+-- shelljs@0.7.8
+-- uglifyjs-webpack-plugin@1.3.0
+-- url-loader@0.5.9
+-- vue-axios@3.5.2
+-- vue-cli@2.9.6
+-- vue-fragment@1.6.0
+-- vue-jest@1.4.0
+-- vue-loader@13.7.3
+-- vue-router@3.6.5
+-- vue-smooth-dnd@0.8.1
+-- vue-style-loader@3.1.2
+-- vue-template-compiler@2.7.14
+-- vue@2.7.14
+-- vxe-table@3.6.11
+-- webpack-bundle-analyzer@2.13.1
+-- webpack-dev-server@2.11.5
+-- webpack-merge@4.2.2
+-- webpack@3.12.0
`-- xe-utils@3.5.7

无效方案1:

externals:{
   'vue': 'Vue',
//这里无论写成 'element': 'element-ui' 还是 'element-ui':'element' 都无效
   'element': 'element-ui', 
},

能够排除vue,不能排除 element.

无效方案2.

注释掉这行代码 build 后 仍然会打包element的css文件
//import 'element-ui/lib/theme-chalk/index.css'

element无论使用 全部加载 还是按需加载 情况都一样.

最终解决方案:

最终(几个月后),找到解决方案(原网址忘记了,翻遍了历史记录都没有找到)

(1)注释(不引入css) //import 'element-ui/lib/theme-chalk/index.css'

(2)修改 .babelrc

原来部分

"component",
 {
  "libraryName": "element-ui",
  "styleLibraryName": "theme-chalk"
}

改为 

"component",
{
    "libraryName": "element-ui",
    "style": false
}

这样build 就不会加载 element的css文件了

然后按照这个方案:

https://blog.csdn.net/LuckKing0925/article/details/121911587 

手动引入 element 的css,用js加载css,需要换肤的时候 全局替换css中的值.