When using the custom theme, the element UI gives the tutorial in two ways:
- 1. SCSS is used in the project
- 2. SCSS is not used in the project
be careful：This article mentions that SCSS is not used in the projectAll the contents of this paper are based on this point to give practical experience, so students who use SCSS in the project canTurn aroundYes.
Question:When I use the custom theme according to the official document of element UI, I encounter the following problems: when I use the command-line tool to initialize the variable file and execute the command ET – I, the console window reports an error: referenceerror: primordials is not defined.
reason:By consulting the data, it is found that the current node version is too high, and netizens unanimously recommend using node11.15.0. After practice, the variable file is finally initialized successfully, and the subsequent steps are green.
Screenshot of success:
Solution steps (strictly follow this tutorial, do not omit each step and make no difference in each command)
The following commands are executed by inputting CMD directly in Win + R
1. Uninstall cnpm
`npm uninstall cnpm -g`
2. Uninstall Vue cli
`npm uninstall @vue/cli -g`
3. Uninstall nodejs and delete files
C: Program / files (x86) / nodejs or C:Program/ Files/nodejs
C: Users / administrator / appdata / roaming NPM or C:Users/Administrator/AppData/Roaming/npm-cache`
1. Install stable node
Open this URL https://nodejs.org/download/release/v11.15.0/node-v11.15.0-x64.msi `
2. Install Taobao image cnpm
`npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org`
3. Vclue installation
`cnpm install @vue/cli -g`
(the following command will be executed in the project folder)
4. Enter project file
5. Editor package.json file
Delete two lines
`"element-theme": "^2.0.1", "element-theme-chalk": "^2.13.0",`
6. Re install dependencies
`cnpm i element-theme -g`
`cnpm i element-theme-chalk -D`
8. Initialize global variable file
9. Create theme folder
10. In main.js introduce
Test: open element- variables.scss , modify $– color success: ා 0d0e0d! Default; / / black, and add a success button to your page
< El button type = “success” round > success button < / El button >
Find that the success button turns black, that is, your custom color, indicating that the modification of the theme file has taken effect.
If there is any deficiency, please correct it!!