vue下less全局变量换肤问题

需求：页面上一个按钮点击后能够切换皮肤；
操作：less定义了全局变量值，引用方式如下：
修改：build - utils.js

less: generateLoaders('less').concat({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/style/default.less')
}
}),

变量的确是全局的了，但是如何才能切换。
我有两套全局变量，如图：

需要通过按钮切换这两套
default.less:

@primary-color: rgba(255,255,255,0.85); // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: rgba(255,255,255,0.2); // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
///自主设定
@font_color: rgba(255,255,255,0.85); // 字体颜色
@font_size: 14px; // 字体颜色
@border_radius: 2px;

在线等，提供有效思路或解决办法，跪谢。

回答

在顶级的元素增加指定皮肤样式的 class
譬如<div :class="app ${customColor}">
然后按钮切换顶级的className

less是precss处理器,它不是运行时的,浏览器不认识,0202年了,换肤用css变量吧

default.less
#default {
@primary-color: rgba(255,255,255,0.85);
@font-size: 14px;
.theme(
@primary-color,
@font-size)
}

red.less
#red {
@primary-color: rgba(255,255,255,0.85);
@font-size: 16px;
.theme(
@primary-color,
@font-size)
}

theme.less
import 'default.less';
import 'red.less';
.theme(@primary-color, @font-size) {
    .fuzujian-example-class {
        color: @primary-color;
        font-size: @font-size;
        .zizujian-example-class {
            color: @primary-color;
            font-size: @font-size;
        }
    }
}

项目中main.js引入theme.less，在app.vue的根位置加一个id,id为default或者red,换肤就是改变id为default或者为red.
以上面例子为例，id为default是字体是14，为red时就是16px

总的来说，你有两套方案可选：
第一套：使用less的node插件编译出多分固定的css文件出来，然后通过动态link标签实现换肤，这个功能适合主题颜色数量固定的需求场景下。
第二套：使用less的浏览器端编译功能，具体可查看这个文档：http://lesscss.cn/#using-less...

以上是 vue下less全局变量换肤问题 的全部内容， 来源链接： utcz.com/a/43809.html

回到顶部