vux如何配置颜色

创建theme.less文件

注意：路径问题，反复尝试过几次，要慎重
在src目录下创建style文件夹
在文件夹用创建theme.less

image.png

配置

1、build／webpack.base.conf.js

//配置颜色
let lessTheme = {
  name:'less-theme',
  path:'src/style/theme.less'
}

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', lessTheme ,'progress-bar', 'duplicate-style']
})

2、App .vue
引入theme.less，还是要注意路径

<style lang="less">
@import '~vux/src/styles/reset.less';
@import './style/theme.less';

body {
  background-color: #fbf9fe;
}
</style>

使用

可配置颜色
源码地址：https://github.com/airyland/vux/blob/v2/src/styles/variable.less
根据官网提供
我们可以根据自己需要，在创建的theme.less文件中设置
例如：theme.less

@header-background-color: #ffffff;
@header-title-color: #000000;
@header-text-color: #ccc;
@header-arrow-color: #ccc;