Import as needed with babel-plugin-component according to the official documentation, then change. Babelrc to:

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

We can also customize SCSS style variables to override element-UI to change the theme color. Create element – variables. SCSS

/* Change the theme color variable */
$--color-primary: # 912;
/* Change icon font path variable, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
Copy the code

Then import element-variable. SCSS in the main.js file:

import { Button } from 'element-ui'
import '@/assets/style/element-variables.scss'

Vue.component(Button.name, Button)
Copy the code

One problem is that changing the theme in this way makes for a very large CSS package. But it’s very frustrating if you comment out the statement style and it doesn’t work.

The following figure shows that the babel-plugin-Component works. But app.[hash]. CSS is huge, and contains all the styling of Elder-UI, and is vendors.[hash].

This is because babel-plugin-Component is packaged in the lib folder by default, but the style files in the lib folder are CSS files, so there is no way to change the theme color dynamically by simply changing the way SCSS style variables are overridden. That’s why if we annotate @import “~ elder-ui /packages/theme-chalk/ SRC /index”; We redefined the style variable to override variables in the index. SCSS file, and then generated a new style to override the original style file to achieve the effect of the custom theme.

But we can implement on-demand loading of true styles by modifying the babel-plugin-Component configuration + global import style variables.

Modify.babelrc file:

{
  presets: [
    '@vue/cli-plugin-babel/preset'].plugins: [['component',
      {
        'libraryName': 'element-ui'.// By default, libDir defaults to the lib folder
        'libDir': 'packages'.// The SCSS file is placed under Packages /theme-chalk/ SRC
        'styleLibraryName': 'theme-chalk/src'.'ext': '.scss'}}]]Copy the code

At this point, we can implement the introduction of SCSS on demand, and then we configure the global SCSS variable. Modify the element-variable. SCSS file to keep only variables:

/* Change the theme color variable */
$--color-primary: # 912;
/* Change icon font path variable, required */
// $--font-path: '~element-ui/lib/theme-chalk/fonts';

// @import "~element-ui/packages/theme-chalk/src/index";
Copy the code

To configure the vue.config.js file:

{
  css: {
    loaderOptions: {
      scss: {
        prependData: [
          '@import "src/assets/style/element-variables.scss"; './ / not must
          // The element UI variable is included here because it may be used in other style files
          // There is no override definition in the custom variable file
          '@import "~element-ui/packages/theme-chalk/src/common/var.scss"; '
        ].join(' ')}}}}Copy the code

There is no need to introduce custom theme styles in main.js as we started:

import { Button } from 'element-ui'
// import '@/assets/style/element-variables.scss'

Vue.component(Button.name, Button)
Copy the code

Packing effect: