根据url?mark换肤

通过less + app_mark + localStorage

- 引入less
    引入less
        yarn add less less-loader -D
        <style lang="less">
    全局使用变量 安装资源预处理器
        yarn add sass-resources-loader -D
        yarn add style-resources-loader -D
        build > utils.js
            // less: generateLoaders('less'),
            less: generateLoaders('less').concat({
                loader: 'sass-resources-loader',
                options: {
                    resources: path.resolve(__dirname, '../src/theme/base.less')
                }
            }),
- base.less
    ***
-- App.vue
    <div id="app" :class="['app',`app_${entryApp}`]">
- HelloComp.vue
    ****
    localStorage.setItem('ENTRY_APP', str)
    div.className || style{.className()}
- mixin.js
    created(){this.entryApp = localStorage.getItem('ENTRY_APP') || 'default'}

    base.less
    /* 配色
            主色
            + 辅助色
            + 中性色 文字 333 666 999
    按钮
    常用
        + 弹窗
        + 功能按钮
    字号规范
        普通
        + 标题
        + 小标题
        + 提示文字 */

    // FONT_SIZE
    @fsXs:10px;
    @fsS:24px;
    @fsM:28px;
    @fsL:32px;
    @fsXl:36px;

    /**
    * THEME #app是公共样式器只允许修改公共
    * 修改单独小样式 ClassName_dingding
    * 参数说明：
         @clrMain:#333, // 主色调
        @clrAssist:#666, // 辅助色
        @clrHint:#999, // 提示色
        @clrImport:#f00, // 重要色
        @bgPage:#d5d5d5 // 页面背景色
    **/
    .Theme(
         @clrMain:#333,
        @clrAssist:#666,
        @clrHint:#999,
        @clrImport:#f00,
        @bgPage:#d5d5d5
    ) {
        color: @clrMain;
        background: @bgPage;

        @oColor: {
            Main: @clrMain;
            Assist: @clrAssist;
            Hint: @clrHint;
            Import: @clrImport;
        };
        each(@oColor,{
            .clr@{key}{color:@value};
            .bg@{key}{background:@value};
        })
    }
    // THEME default
    .app_default{
        .Theme();
    }
    // THEME dingding
    .app_dingding{
        .Theme(
            @clrMain:#3f5797,
            @clrAssist:#85a6c5,
            @clrHint:#b1acca,
            @clrImport:#d1a5c8,
            @bgPage:#976185
        );
    }
    // THEME meituan
    .app_meituan{
        .Theme(
            @clrMain:#ca762e,
            @clrAssist:#d29634,
            @clrHint:#d6ab3a,
            @clrImport:#daca41,
            @bgPage:#d0db3f
        );
    }

通过 --

document.body.style.setProperty('--themeColor','#f00')

失败点

## less.modifyVars
less.modifyVars({
    '@main': '#f00'
});
less.modifyVars这个方法是基于浏览器而言的
window.less

## 二次重写@main

收录Url

代码片段

## App.vue
<template>
  <div id="app" :class="['app',`app_${entryApp}`]">
    {{entryApp}}
    <router-view/>
  </div>
</template>

## HelloComp.vue
<template>
  <div class="list">
    <h3>颜色卡</h3>
    <router-link to="/HelloComp01">
      <button class="button">HelloComp01</button>
    </router-link>
    <ul>
      <li class="bgMain"><span class="clrMain">text</span></li>
      <li class="bgAssist"><span class="clrAssist">text</span></li>
      <li class="bgHint"><span class="clrHint">text</span></li>
      <li class="bgImport"><span class="clrImport">text</span></li>
    </ul>
    <p class="clrMain">主色调</p>
    <p class="clrAssist">辅助色</p>
    <p class="clrImport">重要字</p>

    <button @click="changeSkin('default')">default</button>
    <button @click="changeSkin('dingding')">dingding换肤</button>
    <button @click="changeSkin('meituan')">meituan换肤</button>
  </div>
</template>

<script>
export default {
  name: 'HelloComp',
  data () {
    return {
      msg: ''
    }
  },
  methods:{
    changeSkin(str) {
      localStorage.setItem('ENTRY_APP', str)
      this.$router.go(0)
    }
  }
}
</script>

<style lang="less" scoped>
  .list{
    ul{
      display: flex;justify-items: center;justify-content: center;
      list-style-type: none;
      li{
        width: 100px;height: 100px;border-radius: 100px;margin: 0 20px;
        text-align: center;font-size: @fsM;line-height: 100px;
        background: beige;
        span{
          position: relative;top: 100px;
        }
      }
    }
  }

</style>