vue cli3 定制vant主题色及设置全局less变量

vue-cli3定制vant主题色

1. 安装
   cnpm i babel-plugin-import -D

2. babel.config.js

   module.exports = {
     presets: ['@vue/app'],
     plugins: [
       [
         'import',
         {
           libraryName: 'vant',
           libraryDirectory: 'es',
           style: name => `${name}/style/less`
         },
         'vant'
       ]
     ]
   }
   

3. vue.config.js

   module.exports = {
     css: {
       loaderOptions: {
         less: {
           modifyVars: {
             red: '#d6426a',
             blue: '#7b8cce',
             orange: '#f08d49',
             'text-color': '#111'
           }
         }
       }
     }
   }
   

4. 使用例子： demo.vue

image.png

vue-cli3设置全局变量

1. 安装

   cnpm i style-resources-loader -S
   cnpm i vue-cli-plugin-style-resources-loader -S
   

2. vue.config.js

   module.exports = {
     pluginOptions: {
       'style-resources-loader': {
         preProcessor: 'less',
         patterns: [path.resolve(__dirname, 'src/assets/css/mixin.less')]
       }
     }
   }
   
   

3. minxin.less

   // 设置全局变量
   @minWidth: 1440px;
   @headerHeight: 80px;
   @primary: #0590ff;
   @info: #34bfa3;
   @warning: #f5a623;
   @danger: #f25151;
   @border: #ebedf2;
   @fontSize1: 14px;
   @fontSize2: 16px;
   

4. 任意文件使用

github项目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git