IE 下切换主题配色解决方案 #

const fs = require('fs');
const sass = require('sass');
const { minify } = require('csso');
const csstree = require('css-tree');

class ExtractCssDiffWebpackPlugin {
  constructor(options) {
    // 业务板块名称
    this.themeNames = options.themeNames;
    // 开发环境的 SCSS 文件是否被 '.theme-*' 包裹？
    this.scssIsWrappedByThemeName = options.scssIsWrappedByThemeName;
  }
  apply() {
    // 各 SCSS 转换为抽象语法树再转为普通对象然后取children属性
    let plainObjectChildrens = {};
    // 储存相同代码
    let same = [];
    // 储存差异代码
    let diffs = {};
    // 给各变量注入内容
    // 其中 .replace 的作用是为解决 Element UI 的图标乱码现象，
    // 做法是将 unicode 码前面多加一个 \ ，后续会有代码删除多加的 \
    this.themeNames.forEach((themeName) => {
      const plainObject = csstree.toPlainObject(
        csstree.parse(
          minify(
            sass
              .compile(`./src/assets/styles/theme-${themeName}.scss`, {
                quietDeps: true,
                style: 'expanded',
              })
              .css.replace(/content: "\\([a-z0-9]{4})";/g, 'content: "\\\\$1";')
          ).css
        )
      );
      plainObjectChildrens[themeName] = plainObject.children;
      diffs[themeName] = [];
    });

    // 提取相同代码和差异代码
    for (let i = 0; i < plainObjectChildrens.default.length; i++) {
      // 如果 this.scssIsWrappedByThemeName 为 true，
      // 那么规则的差别除了 CSS 属性值的差别之外还有业务板块名称的差别，
      // 所以先要使用 .replace 消除业务板块名称的差别，避免被这个假的差别干扰，
      // 之后如果还有差别就一定是 CSS 属性值的差别，这才是真正的差别。
      // 如果 this.scssIsWrappedByThemeName 为 false，
      // 则 .replace 会无匹配，所以也不碍事。
      // 另外，这里判定相同代码和差异代码的算法使用了简陋但准确的算法，
      // 即：排除假的差别之后，只要 JSON 字串相同，就认为是相同的规则。
      const newSet = new Set();
      for (let themeName in diffs) {
        newSet.add(
          JSON.stringify(plainObjectChildrens[themeName][i]).replace(
            RegExp('theme-' + themeName, 'g'),
            ''
          )
        );
      }
      if (newSet.size === 1) {
        if (
          this.scssIsWrappedByThemeName &&
          plainObjectChildrens.default[i].type === 'Rule'
        ) {
          plainObjectChildrens.default[i].prelude.children.forEach((v) => {
            v.children.shift();
            v.children.shift();
          });
        }
        same.push(plainObjectChildrens.default[i]);
      } else {
        for (let themeName in diffs) {
          if (
            !this.scssIsWrappedByThemeName &&
            plainObjectChildrens[themeName][i].type === 'Rule'
          ) {
            plainObjectChildrens[themeName][i].prelude.children.forEach((v) => {
              v.children.unshift(
                {
                  type: 'ClassSelector',
                  loc: null,
                  name: 'theme-' + themeName,
                },
                {
                  type: 'Combinator',
                  loc: null,
                  name: ' ',
                }
              );
            });
          }
          diffs[themeName].push(plainObjectChildrens[themeName][i]);
        }
      }
    }
    // 将相同代码和差异代码写入文件
    fs.writeFileSync(
      './src/assets/styles/element-ui-common.css',
      minify(
        csstree
          .generate(csstree.fromPlainObject({ type: 'StyleSheet', children: same }))
          // 原因见上文注释
          .replace(/\\\\/g, '\\')
      ).css
    );
    for (let themeName in diffs) {
      fs.writeFileSync(
        `./src/assets/styles/theme-${themeName}.css`,
        minify(
          csstree
            .generate(
              csstree.fromPlainObject({ type: 'StyleSheet', children: diffs[themeName] })
            )
            // 原因见上文注释
            .replace(/\\\\/g, '\\')
        ).css
      );
    }
  }
}

module.exports = ExtractCssDiffWebpackPlugin;

const ExtractCssDiffWebpackPlugin = require('./ExtractCssDiffWebpackPlugin');

module.exports = defineConfig({
  chainWebpack(config) {
    config.when(process.env.NODE_ENV === 'production', (config) => {
      // themeNames 的第一个元素必须为 'default'
      config.plugin('ExtractCssDiff').use(
        new ExtractCssDiffWebpackPlugin({
          themeNames: ['default', 'teacher', 'student'],
          scssIsWrappedByThemeName: false,
        })
      );
    });
  },
});

{
  path: '/',
  name: 'home',
  component: HomeView,
  beforeEnter: (to, from, next) => {
    if (process.env.NODE_ENV === 'development') {
      import('@/assets/styles/theme-default.scss').then(() => {
        next();
      });
    } else {
      Promise.all([
        import('@/assets/styles/theme-default.css'),
        import('@/assets/styles/element-ui-common.css')
      ]).then(() => {
        next();
      });
    }
  },
},

{
  path: '/teacher',
  name: 'teacher',
  component: () => import(/* webpackChunkName: "teacher" */ '../views/Teacher.vue'),
  beforeEnter: (to, from, next) => {
    if (process.env.NODE_ENV === 'development') {
      import('@/assets/styles/theme-teacher.scss').then(() => {
        next();
      });
    } else {
      Promise.all([
        import('@/assets/styles/theme-teacher.css'),
        import('@/assets/styles/element-ui-common.css')
      ]).then(() => {
        next();
      });
    }
  },
  children: [
    // ... 教师板块下所有路由
  ]
},

export default {
  watch: {
    '$route.path': {
      handler(newVal) {
        let bodyClassName = '';
        if (/^\/teacher/.test(newVal)) {
          bodyClassName = 'theme-teacher';
        } else if (/^\/student/.test(newVal)) {
          bodyClassName = 'theme-student';
        } else {
          bodyClassName = 'theme-default';
        }
        document.body.className = bodyClassName;
      },
      immediate: true,
    },
  },
};

if (process.env.NODE_ENV === 'development') {
  require('@/assets/styles/theme-default.scss');
} else {
  require('@/assets/styles/element-ui-common.css');
  require('@/assets/styles/theme-default.css');
}

onChangeTheme(theme) {
  import('@/assets/styles/theme-' + theme + '.css').then(() => {
    document.body.className = 'theme-' + theme;
  });
}

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]