vue/cli@+vue2 vant主题定制的配置方式

1. 在main.js中引入vant的less文件

import Vant from 'vant'
import 'vant/lib/index.css'

// 引入全部样式
import 'vant/lib/index.less';

// 引入单个组件样式
import 'vant/lib/button/style/less';

2. 创建一个复写的less文件

创建一个名为vant-overwrite.less的覆写文件，存放到src/assets/css/。

这里用button做个测试，把按钮的背景色从绿色替换为红色，less文件的内容如下：

@button-primary-background-color:#ff0000;

3. 修改vue.config.js

根据package.json中less-loader的版本，可以分为两种配置

• less-loader < 6.0时：

const path = require("path");
const theme = path.join(__dirname, './src/assets/css/vant-overwrite.less');

module.exports = {
  ...

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          hack: `true; @import "${theme}";`
        },
      },
    },
  }

  ...
}

• less >= 6.0 时：

const path = require("path");
const theme = path.join(__dirname, './src/assets/css/vant-overwrite.less');

module.exports = {
  ...

  css: {
    loaderOptions: {
      less: {
        lessOptions: {
           modifyVars: {
             hack: `true; @import "${theme}";`
           },
        },
      },
    },
  }

  ...
}

4. 重新运行 npm run serve即可

本文由 程序哩 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 23, 2021 at 07:25 pm