欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 旅游 > 如何通过less在vue2中达到切换皮肤的目的

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

2025/3/31 21:26:53 来源:https://blog.csdn.net/u010782109/article/details/146462141  浏览:    关键词:如何通过less在vue2中达到切换皮肤的目的

先装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);},},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词