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

Leave a reply

1、什么是Vuejs，什么是Vux，如果这两者你都清楚的话，绕过；
2、vux的文档中，组件一般分为安装、属性、事件、插槽、样式变量等方面进行介绍；
3、样式变量就是这里要讲的主题，根据业务需要我们有时候需要修改组件的样式；
4、修改样式通常的做法是在vue中用css样式去覆盖原有的样式，这里有两个问题；
4.1、如果样式文件没有加scoped关键字，很多样式需要在后面加!important才能强制生效；
4.2、如果多个vue中需要用到这个组件，难不成一个一个去改，或者重写这个组件？！
5、比较好的办法就是将修改样式变量！
6、好了，所有的问题都解决了，只需要关注如何修改这些个样式变量即可！
7、分两步：
7.1、新建一个样式文件，比如src/style/theme.less；
7.2、修改工程中build/webpack.base.conf.js文件，在安装vux时官方告诉你应该这样：

1
2
3
4
5
6

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

7.3、现在将plugins:[‘vux-ui’]改成：

1
2
3
4
5
6
7
8

  plugins: [{
      name: 'vux-ui'
    },
    {
      name: 'less-theme',
      path: 'src/common/style/theme.less'
    }
  ]

7.4、稍微解释一下，这个path就是前面新建主题样式文件theme.less的路径；
7.5、接下来就是在theme.less中重写样式 变量即可。
7.5.1、比如：@button-global-border-radius:10px这样就替换掉x-button中圆角边框的值；

Leave a Reply