借助sass-resources-loader实现less，scss变量全局注册

sass与less是两个css预编译器，借助scss-loader和less-loader将.scss文件和.less文件编译为浏览器认识的css;两者的使用类似，scss声明变量使用$,less声明变量使用@，两者的编译环境不一样，scss是在服务端编译，也就是不用浏览器花时间去编译，less就是前端（浏览器），但个人感觉这并没有为scss带来多大优势；网上也常用人说都什么年代了，还用less，个人就觉得less与scss都差不多，用什么只看个人习惯了，不必跟风！下面就来说一下注册全局变量之后怎么才能在不引入的情况下访问全局变量！

首先这一实现需要借助一个加载器 ==》 sass-resources-loader；

npm i sass-resources-loader -S

然后就需要在vue.config.js文件中写入相应的配置：

module.exports = {
    // 其他配置
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                @import "@/assets/styles/vars.scss";
                @import "@/assets/styles/mixins.scss";
                @import "@/assets/styles/functions.scss";
                `
            }
        }
    },
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 引入一个全局sass文件
                    resources: './src/assets/styles/vars.scss',

                    // 引入多个全局sass文件
                    resources['./src/assets/styles/vars.scss','./src/assets/styles/mixins.scss','./src/assets/styles/functions.scss']
                })
                .end()
        })
    },

}