基于webpack4+vue-cli3项目实现换肤功能

// 从github下载vue-admin-template
clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template
npm install
npm run dev

npm install style-loader --save-dev

// theme-chalk/index.useable.scss
body {
  background: red; 
}
// theme-light/index.useable.scss
body {
  background: green; 
}

// 换肤loader
  const scss = config.module.rule('scss').toConfig();
  const useable = { ...scss.oneOf[3], test: /\.useable.scss$/ };
  useable.use = [...useable.use];
  useable.use[0] = { loader: 'style-loader/useable' };
  config.module.rule('scss').merge({ oneOf: [useable] });

const cache = {};
const themeAction = {
 chalk() {
  if (!cache.chalk) {
   cache.chalk = import('./styles/theme-chalk/index.useable.scss');
  }
  return cache.chalk;
 },
 light() {
  if (!cache.light) {
   cache.light = import('./styles/theme-light/index.useable.scss');
  }
  return cache.light;
 }
};
let current = null;
async function setTheme(theme) {
 if (themeAction[theme]) {
  const style = await themeAction[theme]();
  if (current) {
   current.unref();
  }
  style.ref();
  current = style;
 }
}
window.setTheme = setTheme;
export default setTheme;

import setTheme from './theme'
// 使用主题
setTheme('chalk')