vue项目中如何引入全局sass-less变量、函数、mixin

我们考虑以下场景：在使用rem/vw开发移动端时，定义一个px转rem函数，或者网站配色等全局变量，然后到项目中为每个vue文件或组件@import'publicfilename.scss'，这种工作你得重复很多很多次，万一这些public文件目录的路径变了怎么办，哭都来不及了，想想都可怕！接下来拯救我们的神器即将登场---sass-resources-loader，可以省去重复导入的需要，还支持less，postcss等，具体用法如下：npminstall-dsass-resource-loader首先我们在项目中找到build目录，在该目录下找到util.js。util.js更新前的代码如下：'usestrict'constpath=require('path')constconfig=require('../config')constExtractTextPlugin=require('extract-text-webpack-plugin')constpackageConfig=require('../package.json')exports.assetsPath=function(_path){constassetsSubDirectory=process.env.NODE_ENV==='生产'？config.build.assetsSubDirectory:config.dev.assetsSubDirectory返回path.posix.join(assetsSubDirectory,_path)}exports.cssLoaders=function(options){options=options||{}constcssLoader={loader:'css-loader',options:{sourceMap:options.sourceMap}}//生成用于提取文本p的加载器字符串lugin函数generateLoaders(loader,loaderOptions){constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader]if(loader){loaders.push({loader:loader+'-loader',options:Object.assign({},loaderOptions,{sourceMap:options.sourceMap})})}//指定该选项时提取CSS//（在生产构建期间就是这种情况）if(options.extract){returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader'})}else{return['vue-style-loader'].concat(loaders)}}//https://vue-loader.vuejs.org/en/configurations/extract-css.htmlreturn{css:generateLoaders(),postcss:generateLoaders(),less:generateLoaders('less'),sass:generateLoaders('sass',{indentedSyntax:true}),scss:generateLoaders('sass'),stylus:generateLoaders('stylus'),styl:generateLoaders（'手写笔'）}}//为独立样式文件（在.vue之外）生成加载器[扩展名]output.push({test:newRegExp('\\.'+extension+'$'),use:loader})}returnoutput}exports.createNotifierCallback=()=>{constnotifier=require('node-notifier')return(severity,errors)=>{if(severity!=='error')returnconsterror=errors[0]constfilename=error.file&&error.file.split('!').pop()notifier.notify({title:packageConfig.name,message:severity+':'+error.name,subtitle:filename||'',icon:path.join(__dirname,'logo.png')})}}/***添加hljs的类名*/exports.wrapCustomClass=function(render){returnfunction(...args){returnrender(...args).replace('','')}}/***格式化HTML字符串*/exports.convertHtml=function(str){returnstr.replace(/(&#x)(\w{4});/gi,$0=>String.fromCharCode(parseInt(encodeURIComponent($0)).replace(/(%26%23x)(\w{4})(%3B)/g,'$2'),16)))}查看util.js文件，我们先找出我需要修改target的地方：//https://vue-loader.vuejs.org/en/configurations/extract-css.html返回{css:generateLoaders(),postcss:generateLoaders(),less:generateLoaders('less'),sass:generateLoaders('sass',{indentedSyntax:true}),scss:generateLoaders('sass'),stylus:generateLoaders('stylus'),styl:generateLoaders('stylus')}我们以sass为例，使用sass-resources-loader对其进行改造：/***sassLesssourcefile*@paramnameclassFile*@returns{string}*/functionresolveResouce(name){returnpath.resolve(__dirname,'../static/'+name);}//导入全局sassmixin函数和其他函数generateSassResourceLoader(){var加载器=[cssLoader,//'postcss-loader','sass-loader',{loader:'sass-resources-loader',options:{//需要全局路径resources:[resolveResouce('index.scss')]}}]if(options.extract){returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader'})}else{return['vue-style-loader'].concat(loaders)}}工具写好之后我们直接调上门返回对象，代码如下//https://vue-loader.vuejs.org/en/configurations/extract-css.htmlreturn{css:generateLoaders(),postcss:generateLoaders(),less:generateLoaders('less'),sass:generateSassResourceLoader(),scss:generateSassResourceLoader(),stylus:generateLoaders('stylus'),styl:generateLoaders('stylus')}一样可以从代码中可以看出，我们将sass和scss的loader替换成了自己根据sass-resources-loader编写的方法，从而达到了我们的目的。