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

   <template>
     <div class="demo">
       demo页
       <div>
         <van-button type="default">默认按钮</van-button>
         <van-button type="primary">主要按钮</van-button>
         <van-button type="info">信息按钮</van-button>
         <van-button type="warning">警告按钮</van-button>
         <van-button type="danger">危险按钮</van-button>
       </div>
       <div class="mt-30">
         <van-cell-group>
           <van-field v-model="value" placeholder="请输入用户名"/>
         </van-cell-group>
       </div>
     </div>
   </template> 
   

    <script>
        import { Button, Field, Cell, CellGroup } from 'vant'
        export default {
          components: {
            [Button.name]: Button,
            [Field.name]: Field,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup
          },
          data() {
            return {
              value: ''
            }
          }
        }
    </script>
    <style lang="less" scoped>
    div {
        font-size: @fontSize1;
    }
    </style>

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. 任意文件使用

   <style lang="less" scoped>
   div {
     font-size: @fontSize1;
   }
   </style>
   

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