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

需求:

element换肤

实现:

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

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

坑:

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

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

我的环境版本:

[email protected] [email protected]

D:\www\vue>npm ls
[email protected] D:\www\vue
+-- @babel/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

无效方案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中的值.