How to implement a custom theme by overriding the SCSS variable of Element?

Customize your Element UI theme: SCSS variable overlay method

In Element UI projects, it is crucial to customize the themes flexibly. This article will explain in detail how to easily create personalized topics by overriding the SCSS variables of the Element UI.

theme-chalk theme of Element UI is written based on SCSS, which allows us to implement theme customization by modifying its variables. But it should be noted that the variable values ​​in precompiled CSS files provided by Element UI are fixed. To implement variable overwrite, the SCSS source file of the Element UI must be directly introduced instead of the precompiled CSS file.

Why can SCSS variables be overwritten?

Because the SCSS compiler processes the code in order. The variables you define before importing the SCSS source file of the Element UI will be read first by the compiler, thus overwriting the variables with the same name in the source file.

For example, create a file named element-variables.scss and add the following code:

 /* Modify the main color of the theme*/
$--color-primary: #007bff; // For example, change to blue/* You must set: icon font path*/
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

In this file, we first define the new $--color-primary variable, and then import the SCSS source file of the Element UI. The order of @import statements is crucial, which ensures that custom variables are processed by the compiler before the Element UI variable.

The difference between @import and import

Two ways to import:

1. @import "~element-ui/packages/theme-chalk/src/index"; This is the import statement of SCSS, importing the SCSS source code of the Element UI. Support variable overlay.
2. import 'element-ui/lib/theme-chalk/index.css'; This is a JavaScript import statement, which imports a precompiled CSS file. Variable overwrite is not supported .

Both are mutually exclusive. When choosing to use SCSS import method, there is no need to introduce CSS files at the same time.

Summarize

Create a custom theme by creating a custom SCSS file, defining new variables and importing the SCSS source file of the Element UI in the correct order. Remember, your project entry file should only introduce this custom SCSS file to avoid conflicts with precompiled CSS files.

The above is the detailed content of How to implement a custom theme by overriding the SCSS variable of Element?. For more information, please follow other related articles on the PHP Chinese website!