Vue element UI vuex for skin switch

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


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 */
            selector: '.custom-ffe400' /* Namespace added */
        .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'

export default new vuex.Store({
        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

  <div class="hello">
    <el-radio-group v-model="themecolor">
      <el-radio label="000"></el-radio>
      <el-radio label="ffe400"></el-radio>
    <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>

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);


export function toggleClass(element, className) {
    if (!element || !className) {
    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

Tags: npm sass Vue Webpack

Posted on Mon, 02 Dec 2019 11:13:25 -0500 by ijmccoy