Less的手动引入和自动化

Less的自动化导入

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、为什么要做Less的自动化导入？

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

二、项目中引入less

1.手动引入

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. 导入时需求前面添加波浪线 ~

2自动引入方案

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

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

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

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

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变量时，就不再需要手动导入了