If your project uses CSS styles written in SCSS

1, Because Element’s theme-chalk uses SCSS to write CSS styles, you can change Element’s style variables directly in your own project. For example, element-variable. SCSS, write the following

/* Change the theme color variable */ $--color-primary: # 17b3A3! default; $--font path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";Copy the code

3. In your own project entry file main.js, directly import the above style file (no need to import Element compiled CSS file).

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)
Copy the code

Note that the override font path variable is required by assigning it to the relative path of the icon in Element.

If your project uses CSS styles that are not written in SCSS

1. Install elementUI

npm i element-ui -S

2. Install the theme tool

npm i element-theme -g

3. Install chalk theme

NPM installation (recommended) NPM I elemental-theme-chalk -d or GitHub NPM I github.com/ElementUI/t… -D

4. Modify the theme sass file

After the theme generation tool is successfully installed, you can invoke the tool from the COMMAND line interface (CLI) through et for global installation. If the tool is installed in the current directory, you need to access the command through node_modules/. Bin /et. Execute -i to initialize the variable file. The default output is to elemental-variable. SCSS, although you can specify the file output directory by passing the parameter.

Return (); return (); return (); return (); return ()Copy the code

The element- variable. SCSS file will be generated in the root directory of the project, which contains all the variables used by the theme. They are defined in the SCSS format as follows:

5. Edit the element-variable. SCSS file directly and change it to the theme color you want

$–color-primary: # 17b3A3! default;

6. Compile the theme

After modifying the variable, go to the command line and execute et to compile the topic (if the variable is modified again after compiling, it needs to compile again).

Et > ✔ build theme font > ✔ build element themeCopy the code

Run the theme compilation command to generate the theme. The root directory generates the theme folder. You need to import CSS, font, and other resources from this folder. (The theme folder contains the font folder and a large number of CSS files. The CSS file only contains the index. CSS file. The rest of the CSS file can be deleted because the index. CSS file contains the styles of all other CSS files.)

7, introduce custom themes in main.js file:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'  / / here
import '.. /theme/index.css'  / / here
// import 'element-ui/lib/theme-chalk/index.css'


Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

8. Use your own themes in vUE components

<el-button> <el-button type="primary"> <el-button> <el-button type="success"> <el-button type="info"> Information button </el-button> <el-button type="warning"> Warning button </el-button> <el-button Type ="danger"> </el-button>Copy the code

The result looks like this:

8. Tie-in plug-ins introduce component themes on demand

Element.faas.ele. Me /#/ zh-cn /com… With babel-plugin-Component, we can reduce the size of the project by introducing only the components we need. First, install the babel-plugin-Component:

npm install babel-plugin-component -D

Then, change.babelrc to:

{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "Elder-ui ", // "styleLibraryName": "theme-chalk", // Change to our own hand-generated theme" styleLibraryName": "~theme"}]]}Copy the code