1. install sass
npm install --save-dev sass-loader npm install --save-dev node-sass
2. Add configuration in the rules of webpack.base.conf.js under the build folder
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
3. Install the custom theme tool of elementui
npm i element-theme -g npm i element-theme-chalk -D
4. Initialize variable file
et -i element-variables.scss
5. Element variables.scss will be generated in the root directory
6. Compile theme
To change the value of primary, enter et on the command line
et
7. After compilation, generate theme's folder in the home directory (fonts in this file will be useful later)
8. Import in the entry file of main.js
import '../theme/index.css'
9. Use gulp CSS wrap artifact
npm install gulp npm install gulp-clean-css npm install gulp-css-wrap
10. Create a file named gulpfile.js in the root directory of the project
// gulpfile.js var path = require('path') var gulp = require('gulp') var cleanCSS = require('gulp-clean-css') var cssWrap = require('gulp-css-wrap') gulp.task('css-wrap', function () { return gulp.src(path.resolve('./theme/index.css')) /* Find the css file that needs to add namespace, support regular expression */ .pipe(cssWrap({ selector: '.custom-ffe400' /* Namespace added */ })) .pipe(cleanCSS()) .pipe(gulp.dest('src/assets/css/theme/ffe400')) /* Contents of storage */ })
The ffe400 in custom-ffe400 is the color when the custom theme was just generated
11. Execute gulp output
gulp css-wrap
If there is no global installation of gulp, you need to install it globally
npm i -g gulp
12. Generate theme name under theme folder
At this time, there is no fonts folder under the folder. Copy the fonts generated when generating theme in No.7 to here
13. Create the store file storage subject status
import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex) export default new vuex.Store({ state:{ themecolor:'000'//20a0ff by default }, modules: { }, mutations: { setThemeColor(state, curcolor){ this.state.themecolor = curcolor } } })
14. Reference in the main.js entry file
import store from './store' import 'element-ui/lib/theme-chalk/index.css' import '../theme/index.css' import './assets/css/theme/000/index.css';
15. On the skin switch page
<template> <div> <el-radio-group v-model="themecolor"> <el-radio label="000"></el-radio> <el-radio label="ffe400"></el-radio> </el-radio-group> <el-button>Default button</el-button> <el-button type="primary">Main button</el-button> <el-button type="success">Success button</el-button> <el-button type="info">Information button</el-button> <el-button type="warning">Warning button</el-button> <el-button type="danger">Danger button</el-button> </div> </template> <script> import { toggleClass } from "../utils/index.js"; export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted () { toggleClass(document.body, 'custom-' + this.themecolor); let curcolor = this.$store.state.themecolor; this.classH2 = 'custome-' + curcolor; }, computed: { themecolor: { get () { return this.$store.state.themecolor; }, set (val) { this.$store.commit('setThemeColor', val) } } }, watch: { themecolor: { handler () { toggleClass(document.body, 'custom-' + this.themecolor); } } } } </script>
16.util->index.js
export function toggleClass(element, className) { if (!element || !className) { return; } element.className = className; }
17. If you want to do more than one set of topics, you can start generating topics from step 5.
Reference from article https://blog.csdn.net/youlinaixu/article/details/83447527