登录模块 (一) 02-修改vant主题蓝色——引入是less文件 & 使用vue-cli的配置-新建vue.config.js文件修改颜色变量

修改vant主题蓝色

第一步：src/main.js

// css中无变量  Less中有变量，可声明蓝色
import Vant from 'vant'
-import 'vant/lib/index.css'
+import 'vant/lib/index.less'

第二步：新建src/vue.config.js vue-cli的配置

//添加webpack的打包配置
module.exports = {
  // 覆盖蓝色主题
  css: {
    loaderOptions: {
      //less加载器
      less: {
        //修改变量
        modifyVars: {
          blue: '#3296fa'
        }
      }
    }
  }
}

• 见文档

  css-加载器配置： https://cli.vuejs.org/zh/config/#css-loaderoptions

• 修改less的变量，引入是less文件

• 使用vue-cli的配置，修改less文件中的变量即可

• 修改vue.config.js配置，一定要重新启动