說(shuō)明
在vux的官網(wǎng)上經(jīng)常能看到有樣式變量這個(gè)東西蛛勉，一開始并不知道怎么用剔桨，想著修改樣式就通過(guò)優(yōu)先級(jí)覆蓋就好了限匣，后面有個(gè)小伙伴問(wèn)起讥珍，我下仔細(xì)去找找文檔-主題顏色配置
vux 樣式變量
vux 樣式變量 實(shí)現(xiàn)
vux 樣式變量 實(shí)現(xiàn)效果
webpack.base.conf.js
在配置文件里历极，將你的less文件配置進(jìn)去
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對(duì)應(yīng)的組件就是樣式已經(jīng)更新過(guò)的了执解，同時(shí)，在你的文件里也是可以用到你新定義的樣式變量
<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>
