需求:
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中的值.