关于less引入全局变量或者函数的问题总结

因为本人使用的是vue2 + vuecli4创建的项目，以下解决方案均为以下环境

最近考虑写一个公司自用的UI框架，就想着自己整理一下目前市面上常用的功能！css编译用了less，因为很多页面都要用到相同的颜色，就想到有没有可以全局引入或者注入less文件的办法。因为一个个页面@import这工作量太大！然后百度了下，发现了sass-resources-loader这个插件！

首先，你得引入less，less-loader这两个依赖吧,这里不细说

npm i less,less-loader --save-dev

如果你跟我一样，使用的是vue-cli@3以上的版本，那么，你应该是这么操作的:

// 打开vue可视化面板
vue ui

// 打开项目所在目录，点击依赖，右上角添加依赖，依次安装less，less-loader

在你的项目安装了less，less-loader之后，想要定义一个less全局变量，这时候，你需要安装sass-resources-loader了！
步骤如下：

// 打开vue可视化面板
vue ui

// 打开项目所在目录，点击依赖，右上角添加依赖，安装sass-resources-loader，目前的版本是@2.1.1

// 或者
npm i sass-resources-loader --save-dev

接下来，我们需要定义一个全局引入的less文件，假如文件在src/assets/css/common.less目录

// common.less
@color-red: #F56C6C;
@height：300px;
@width:300px;

现在，全局变量定义好了，我们需要引用。vue-cli@3以上的，如果在根文件下还没有vue.config.js文件，请创建
在vue.config.js中复制以下代码

// vue.config.js
module.exports = {
    chainWebpack: config => {
    // 如果你使用的是sass，则此处应该为
    // const oneOfsMap = config.module.rule('sass').oneOfs.store
    // 依此类推，其他的比如stylus等一样用法
        const oneOfsMap = config.module.rule('less').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 这里填入你的样式文件地址
                    resources: './src/assets/css/common.less'
                })
                .end()
        })  
    }
}

好了，这样就大功告成了，现在你可以愉快的引入全局的less变量了，你可以定义很多公用样式，傻瓜式引用即可！
示例

// app.vue
<template>
  <div id="app">
   <div  class="login_body">
    我是示例
   </div>
  </div>
</template>
<script>
export default {
  name: 'app'
}
</script>
<style lang="less" scoped>
.login_body {
  width: @width;
  height: @height;
  background: @color-red; // @color-red即为全局定义的样式
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

小白一枚，希望大家都可以多多学习，记录点滴，共同进步！还望多多关照！