vue vux 怎么用 样式变量 修改主题配色

说明

在vux的官网上经常能看到有样式变量这个东西,一开始并不知道怎么用,想着修改样式就通过优先级覆盖就好了,后面有个小伙伴问起,我下仔细去找找文档-主题颜色配置

vue vux 怎么用 样式变量 修改主题配色_第1张图片
vux 样式变量

vue vux 怎么用 样式变量 修改主题配色_第2张图片
vux 样式变量 实现

vue vux 怎么用 样式变量 修改主题配色_第3张图片
vux 样式变量 实现效果

webpack.base.conf.js

在配置文件里,将你的less文件配置进去

module.exports=vuxLoader.merge(webpackConfig,{
  plugins:[
    {name: 'vux-ui'},
    {name: 'less-theme', path: 'src/style/theme.less'}
  ]
})

theme.less

在这里直接重新定义样式变量的值,就能够起到全局修改的效果了

@button-global-border-radius:100px;

info.vue

在你的vue文件中,用vux对应的组件就是样式已经更新过的了,同时,在你的文件里也是可以用到你新定义的样式变量






你可能感兴趣的:(vue vux 怎么用 样式变量 修改主题配色)