项目：前端（定制主题，打包后页面加载空白）（六）

用更高级的方式，对组件中的样式进行覆盖----定制主题（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: ''
}