Assuming that

Do you know how Element-UI customizes themes

background

Tian, I paged through our operating system cheerfully, suddenly found a good taobao red system all over the blue (maybe I 🤨) this system also focus on the U.S. presidential election, and that is the point of a plate, the theme color of the whole system into element – the default UI that blue, so I hurriedly open the corresponding page, It turns out that the components for this page are currently being introduced. I was under the impression that we had all been introduced on demand in main.js, but this is two years old code, well that’s a historical issue.

The first option is to remove the imported components. However, I searched globally and found dozens of files that had been imported in this way, so it would be a bit too stupid to delete them, so it’s worth digging into the problem in order to be compatible with the previous one:

found

For a start browsing, the front page or the normal display, color also is the theme of the page we custom colors, and these have in common is that there is no page in the current page into components (as registered in the main), so we in the main, js introduced theme file CSS file or have the effect, The problem is with the components introduced in a single page

As we all know, elder-UI components rely on the babel-plugin-component plug-in for on-demand import, so here’s the problem:

If we open the.babelrc file, it should look like this:

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

We can clearly see that the style introduced on demand is still the default element- UI theme-chalk, so it is normal for people to turn blue.

So the answer is obvious here. Point the styleLibraryName to our custom style file, which is under the Theme folder

If your theme folder is in the root directory, you should configure it like this:

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

If you were in another folder, such as SRC /, you would write:

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

The ~ in the path indicates the project root path