假设

你知道element-ui如何自定义主题

背景

佐田，我兴致勃勃的翻看着我们的运营系统，突然发现好好的淘宝红系统全部都翻蓝了（难不成我这系统也关注了美国大选🤨），而且就是点了某个板块之后，整个系统的主题色都变成了element-ui默认的那种蓝，于是我赶紧打开对应的页面，发现这个页面的组件都是在当前引入的，我印象里我们都在main.js里按需引入了，但一看这是两年前的代码，好吧这还是个历史问题。

于是摆在我面前的就有两种方案，一种就是移除这堆引入的组件，然而我全局搜索一看，足足有几十个文件是这么引入的，所以如果真要删起来有点太sb了所以为了兼容之前的这种写法，有必要深究一下这个的问题所在：

发现

因为一开始浏览的时候，前面的页面还是正常显示的，页面的主题色也都是我们自定义的颜色，而且这些页面的共同点就是没有在当前页面引入组件（因为都在main里注册过了），所以我们在main.js引入的theme文件的css文件还是有效果的，问题就出在了单页面中引入的那些组件上

众所周知，element-ui组件依靠babel-plugin-component这个插件来实现按需引入的，所以问题就出在这里了：

我们打开.babelrc文件，应该都长这样吧：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

我们清楚的可以看到，按需引入的样式还是走的element-ui默认的theme-chalk，所以人家翻蓝也是很正常，

所以答案到这里就很明显了，将styleLibraryName指向我们自定义的样式文件，也就是theme文件夹下的

如果你的theme文件夹在根目录，你应该这么配置：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}

如果在其他文件夹里，比如src/下，你应该这么写：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~/src/theme"
      }
    ]
  ]
}

路径中的~表示项目根路径

记录element-ui自定义样式的问题

假设

背景

发现