详解vue项目中如何引入全局sass/less变量、function、mixin
让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import‘publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀!
接下来拯救我们的神器就要登场了---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==='production' ?config.build.assetsSubDirectory :config.dev.assetsSubDirectory returnpath.posix.join(assetsSubDirectory,_path) } exports.cssLoaders=function(options){ options=options||{} constcssLoader={ loader:'css-loader', options:{ sourceMap:options.sourceMap } } //generateloaderstringtobeusedwithextracttextplugin functiongenerateLoaders(loader,loaderOptions){ constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader] if(loader){ loaders.push({ loader:loader+'-loader', options:Object.assign({},loaderOptions,{ sourceMap:options.sourceMap }) }) } //ExtractCSSwhenthatoptionisspecified //(whichisthecaseduringproductionbuild) 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.html return{ css:generateLoaders(), postcss:generateLoaders(), less:generateLoaders('less'), sass:generateLoaders('sass',{indentedSyntax:true}), scss:generateLoaders('sass'), stylus:generateLoaders('stylus'), styl:generateLoaders('stylus') } } //Generateloadersforstandalonestylefiles(outsideof.vue) exports.styleLoaders=function(options){ constoutput=[] constloaders=exports.cssLoaders(options) for(constextensioninloaders){ constloader=loaders[extension] output.push({ test:newRegExp('\\.'+extension+'$'), use:loader }) } returnoutput } exports.createNotifierCallback=()=>{ constnotifier=require('node-notifier') return(severity,errors)=>{ if(severity!=='error')return consterror=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的classname */ exports.wrapCustomClass=function(render){ returnfunction(...args){ returnrender(...args) .replace('',' ') } } /** *FormatHTMLstring */ exports.convertHtml=function(str){ returnstr.replace(/()(\w{4});/gi,$0=>String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,'$2'),16))) }
看util.js文件,我们首先找到我需要修改目标在哪:
//https://vue-loader.vuejs.org/en/configurations/extract-css.html return{ 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对其改造:
/** *sassLess源文件 *@paramnameclassFile *@returns{string} */ functionresolveResouce(name){ returnpath.resolve(__dirname,'../static/'+name); } //导入全局sassmixinfunction等 functiongenerateSassResourceLoader(){ varloaders=[ 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) } }
工具写好好了,接下来直接把上门return对象做些调整,代码如下
//https://vue-loader.vuejs.org/en/configurations/extract-css.html return{ css:generateLoaders(), postcss:generateLoaders(), less:generateLoaders('less'), sass:generateSassResourceLoader(), scss:generateSassResourceLoader(), stylus:generateLoaders('stylus'), styl:generateLoaders('stylus') }
从代码中可以看出,我们把sass和scss的loader换成我们自己根据sass-resources-loader写的方法了,这样就实现了我们的目标。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。