vue/cli@+vue2 vant主题定制的配置方式
in 前端 with 0 comment

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

in 前端 with 0 comment

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.jsonless-loader的版本,可以分为两种配置

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}";`
        },
      },
    },
  }

  ...
}
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即可

image-20211103204048957.png

Comments are closed.