在项目中如何使less自动化导入

背景:我们开发的应用有些样式是公用的，比如我们常见的配色色值，为了做到统一修改的目的往往需要定义成less变量，很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大，所以为了解决这个问题，我们采取自动导入的方式，方便我们业务组件使用全局less变量.

       如果没有用less自动化导入的话,我们需要手动导入,这样的话在每个组件都导入一遍显得有点繁琐.程序员不整点花里胡哨的是程序员吗.

1.如果不用自动化导入的话,如何手动引入.

1.1) 准备样式变量文件

// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;

1.2)手动引入使用其中的变量

<template>
  <div class="test">我是测试文字</div>
</template>

<style lang="less" scoped>
// 引入我们定义了less变量的文件
// ~线不能丢
@import "~@/styles/variables.less";
.test {
  color: @xtxColor;
}
</style>

1. less文件定义的变量，在组件中使用时，需要单独导入（每个组件使用时都需要导入）

2. 导入时需求前面添加波浪线 ~

2)自动引入方案

解决方案：使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中

1）在当前项目下执行一下命令vue add style-resources-loader，添加一个vue-cli的插件

2.1)安装完毕后会在vue.config.js中自动添加配置，如下：  

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

2.3）把需要注入的文件配置一下后，重启服务即可

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置哪些文件需要自动导入
        path.join(__dirname, './src/styles/variables.less')
      ]
    }
  }
}

1. 通过vue脚手架的插件，可以辅助自动化导入less文件

2. 后续其他组件在使用less变量时，就不再需要手动导入了