Less的自动化导入

目标：

让业务组件自动加入公共样式（全局字体色值）

前言:

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

自动引入方案

1）准备样式变量文件

src/styles/variables.less

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

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

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

  1.输入Y   2.选择Less

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

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

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

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

测试一下，我们不再需要在组件中手动import引入色值文件了，直接使用就可以了,不需要每个组件每次引入@import "~@/styles/variables.less";(手动引入的麻烦之处)

总结：

1. 通过vue脚手架的插件，可以辅助自动化导入less文件
2. 后续其他组件在使用less变量时，就不再需要手动导入了

手动引入方案

1）准备样式变量文件

src/styles/variables.less

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

2）手动引入使用其中的变量

在app.vue文件中进行简单测试

<template>
  <!-- 一级路由出口 -->
  <router-view />
  <div class="test">我是测试文字</div>
</template>
​
<style lang="less" scoped>
// 引入我们定义了less变化的文件
// ~线不能丢
@import "~@/styles/variables.less";
.test {
  color: @xtxColor;
}
</style>

总结：

1. less文件定义的变量，在组件中使用时，需要单独导入（每个组件使用时都需要导入）
2. 导入时需求前面添加波浪线 ~(所以推荐上面的自动引入)