vue+webpack 更换主题N种方案优劣分析

// 将默认样式特征值替换为变量，用于多次替换
   getStyleTemplate(data) {
    const colorMap = {
     '#fffffe': 'text_color'
    };
    Object.keys(colorMap).forEach(key => {
     const value = colorMap[key];
     data = data.replace(new RegExp(key, 'ig'), value);
    });
    return data;
   },

// 通过用户操作或者接口，获取到要替换的色值
 colors:{
     text_color: '#ff00ff'
    }

// 获取默认样式,可以从已加载的 style 中获取也可以从 css link 获取
   getIndexStyle() {
    document.querySelectorAll('style').forEach(item=>{
     this.originalStyle += this.getStyleTemplate(item.textContent);
    })
   },
   getCssLink(){
     this.get('./cssPath.css').then(json=>{
       this.originalStyle = this.getStyleTemplate(json.data);
     })
   }

// 替换默认样式表，插入 style 标签覆盖样式
   writeNewStyle() {
    let cssText = this.originalStyle;
    log(cssText)
    Object.keys(this.colors).forEach(key => {
     cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + this.colors[key]);
    });
    cssText = cssText.replace(/\n/g,'')
    if (this.originalStylesheetCount === document.styleSheets.length) {
     const style = document.createElement('style');
     style.innerText = cssText;
     document.head.appendChild(style);
    } else {
     document.head.lastChild.innerText = cssText;
    }
   },

const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 抽离css
 module: {
 loaders: [
      {//抽离css 通过link加载
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader'
        })
      }
      ...
      
 plugins: [
    new ExtractTextPlugin({ 
    filename: 'css/[name].css'
    allChunks: true // 打包所有页面css到同一个css 文件
    })
  ]

less: {
    modifyVars: {},
    javascriptEnabled: true
   }

:root {
 --main-bg-color: pink;
}

body {
 background-color: var(--main-bg-color);
}

document.body.style.setProperty('--primary', '#7F583F');

if(a){
  import('./thems/a/base.less')
}else if(b){
   import('./thems/b/base.less')
}