用更高级的方式,对组件中的样式进行覆盖----定制主题(less 变量的覆盖)
vant使用了 Less 对样式进行预处理,所以通过替换样式变量即可定制自己需要的主题。
步骤:
1. 引入样式源文件
将原先引入的index.css 文件改成后缀名为 .less
2. 配置可选配置文件 vue.config.js:
a. 在modifyVars 属性里直接覆盖变量;缺陷:频繁更改了配置文件
b. 或者通过 less 文件的覆盖(文件路径为绝对路径):
//使用 `` 模板字符串对绝对路径进行填充
hack: `true; @import "${ themePath }";`
打包部署之后:
默认 Vue Cli 会假设你的应用部署在一个域名的根路径上(Http 协议),不支持file 协议打开,
需要将 publicPath 的值设置为( ’‘ ),或者( ’ ./ ‘ )
在配置文件 vue.config.js 中新增一个选项:
module.exports = {
publicPath: ''
}