当前位置：首页 > article >正文

如何通过less在vue2中达到切换皮肤的目的

article 2025/3/26 12:20:50

先装less

npm install less less-loader --save-dev

然后将该 loader 添加到 webpack 的配置中去，例如：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

新建see.less 文件定义变量

@primary-color: #007bff;
@secondary-color: #6c757d;

// :root {
//     --primary-color: @primary-color;
//     --secondary-color: @secondary-color;
//   }

@primary-color: var(--primary-color, rgba(255, 80, 215, 1));   // 2a50d7   4875f6
.mt {
    color:  var(--primary-color);
}


<script>
import "../src/less/saa.less";
</script>

或者
<style lang="less" scoped>
@import "../src/less/saa.less";
</style>

在后在切换主题


    <div class="mt">
      -----------更改这里的文字颜色啊---------------------
    </div>
   <button @click="changeSkin('blue')">Load Theme 1</button>
    <button @click="changeSkin('green')">Load Theme 2</button>

//然后在方法里边去更改less变量。
 methods: {
    changeSkin(skin) {
      let primaryColor;
      let secondaryColor;

      if (skin === 'blue') {
        primaryColor = '#007bff';
        secondaryColor = '#6c757d';
      } else if (skin === 'green') {
        primaryColor = '#28a745';
        secondaryColor = '#6c757d';
      }

      // 修改 CSS 自定义属性的值
      document.documentElement.style.setProperty('--primary-color', primaryColor);
      document.documentElement.style.setProperty('--secondary-color', secondaryColor);
    },
  
  },