美文网首页VUX 学习
vue vux 怎么用 样式变量 修改主题配色

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

作者: 羊羊羊0703 | 来源:发表于2018-06-07 14:19 被阅读0次

说明

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

vux 样式变量
vux 样式变量 实现
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对应的组件就是样式已经更新过的了,同时,在你的文件里也是可以用到你新定义的样式变量

<template>
    <div>
    <x-button type="primary">submit</x-button>
    <div class="info">这里用了全局的样式变量</div>
    </div>
</template>

<script>
import { XButton } from 'vux'
export default {
  components: {
    XButton
  }
}
</script>

<style lang="less" scoped>
.info{
  font-size: 18px;
  margin-top: 15px;
  line-height: 2.3333333;
  color: #fff;
  text-align: center;
  background-color: #666;
  border-radius: @button-global-border-radius;
}
</style>

相关文章

  • vue 修改ui框架样式 汇总 样式穿透

    说明 1、方法一:配置全局的样式,请查看 vux 怎么用 样式变量 修改主题配色(vux只是举个例子,其他的ui框...

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

    说明 在vux的官网上经常能看到有样式变量这个东西,一开始并不知道怎么用,想着修改样式就通过优先级覆盖就好了,后面...

  • vux修改主题配色

    webpack.base.conf.js 中修改 plugins theme.less

  • vux局部样式修改

    在使用vux组件的时候,我们经常需要修改其样式,但是又不想通过重写主题改变所有的组件样式,这个时候就需要局部修改了...

  • 更改vux主题配色

    将vux/src/thene.less文件粘贴到项目源码文件中 在webpack中添加插件配置 =>build/...

  • vue-cli构建项目配置全过程

    用vue开发微信平台项目可以搭配vux开发,vux-ui风格类似weui。 开发环境:node 7.5.0vue-...

  • Android自定义按钮样式和背景

    1 需求 开发android应用时,默认的按钮样式,往往不能满足项目的主题、配色的需要。因此要对其进行修改、美化。...

  • 全局样式统一调整

    两种途径: 覆写Ant Design Vue 的样式变量中的 @ant-prefix 。 参考全局化配置文档,修改...

  • web局部(antd)主题方案演进

    背景 当web应用存在着预览场景时,在进阶体验中势必存在主题配色这样的需求。 切换主题即整体修改网页中各元素的样式...

  • vux

    发现一个用vue.js和weui写的组件库vux,map一下。 文档地址:vux github:github

网友评论

    本文标题:vue vux 怎么用 样式变量 修改主题配色

    本文链接:https://www.haomeiwen.com/subject/hdlgsftx.html