今天为大家带来一篇前端技术文章，其实也是想给那些不仅希望解决问题，也想知道问题出现的原因的”钻牛角尖“程序猿刨析一下，抹掉你脑袋的种种“疑问”！
遇到这个问题的概率可能很小，当然了能够出现这个疑问，证明你已经开始对你的技术进行提升，并希望通过更便捷的方式来提升效率。
是怎么遇到这个问题的呢？
前提：
1、基于vue-cli脚手架创建的Vue工程
2、只有一个.vue文件包含/deep/透传语法
整体来讲一下，是因为node-sass这个css编译器目前官方已经宣布停止更新了，并建议切换到dart-sass编译器，所以整个前端工程需要升级一下这个编译器，切换到dart-sass上面。
整体来说，升级切换到dart-sass并不难，因为我们只需要执行一下下面的命令：
npm uninstall node-sass;
npm install sass -D;
然后很开心的就执行了：npm run serve;
结果编译失败，并没有成功运行：
一般解决办法：
很明显，在.vue文件当中，我们在进行样式透传的时候，采用了/deep/语法，而dart-sass并不支持，但是dart-sass是支持::v-deep语法的。
那么我们第一时间能够想到的就是全部手动打开文件将所有/deep/替换成::v-deep，来进行解决。
不过这种办法可以说非常缓慢，要知道我们的项目可能已经累积到成千上百个文件，每一个打开都需要进行替换，是非常耗费时间和精力的。
当然了有些同学或许会采用工具进行文件目录下对文件整体替换，这也是一种解决办法。
但是他们最终都会导致之前的所有代码都需要更改变动，那么有没有什么办法在不改动原有代码的情况下，实现语法的替换呢？甚至说，我们依然可以采用原有的/deep/语法来写，但是最终编译的时候自动转换为::v-deep？
Webpack自定义Loader预处理器解决办法
.vue文件之所以能够被webpack处理，是因为他有vue-loader预处理器，可以将.vue文件进行编译，转换成js，而且每一个预处理是可以进行级联调用的，前一个loader输出的内容可以作为下一个loader的内容传入进去。
所以我们可以采用自定义loader的方法，来实现上面的进行自动替换，于是我就写了一个非常简单的预处理器Loader，通过正则表达式来匹配文件内容，如果包含/deep/我们就对内容进行替换，然后返回替换后的内容。
第一步：新建一个preSassLoader.js处理器
constloaderUtils=require('loader-utils');
module.exports=function(content,map,meta){
if(/\/deep\//g.test(content)){
console.log('找到含有/deep/的文件');
content=content.replace(/\/deep\//,'::v-deep');
}
returncontent;
};
第二步：在vue.config.js文件中，我们增加对.vue文件的自定义loader处理器
chainWebpack:config=>{
config.module
.rule('vue').use('preSassLoader')
.loader('./src/loaders/preSassLoader');
}
第三步：启动工程项目
执行：npm run serve;
结果是编译成功，一般来说，到这儿其实就算是解决了上面自动替换的需求，但是我们有没有发现图中标出的4个红框中的内容，这个自定义preSassLoader其实对于同一个.vue文件来说执行了4次，（本项目为测试项目，只有一个.vue文件当中有/deep/语法）
对于讲究效率的我来说，这是难以接受的，一个文件只需要替换一次就够了，不用执行这么多遍，所以我就开始分析为什么走了4遍？
我开始在网上搜索，这个内容可以说少之又少，不过也有人提出了这样的疑问，不过并没有人来为他解答，不知道那个提问的人现在心中的疑问消除了没？
不过我仔细一想也基本就能理解了，很少有人会这样自定义一个loader来进行处理吧，大部分人都采用第一种解决办法就完事了。
既然网上找不到，那就只能自己进行分析了，开启Debug
通过vscode配置npm 调试模式：
通过观察分析，我们发现在我们自定义loader处理器里面有个resourceQuery字段是不一样的
那么我们增加一个输出，将resourceQuery进行打印
从上图红框中，我们就不难发现，4次的resourceQuery已经解释了，其实一个.vue单文件当中，有3大块，template模板，script，和style，构成了一个页面所需的元素，而vue-loader就是对这个.vue单文件进行编译转换，而多出来的那个处理应该是cache-loader，也就是说对于一个.vue文件来说，会生成四种请求链接：
1、test.vue
2、test.vue?vue&type=template&id=fac91d24&scoped=true&
3、test.vue?vue&type=script&lang=js&
4、test.vue?vue&type=style&index=0&id=fac91d24&scoped=true&lang=scss&
所以我们可以通过resourceQuery来进行过滤处理，此处我们用/type=style/来进行过滤
加上过滤条件后，这个真的就执行一次了。
你以为到这儿就完事了？还差得远呢！！！
虽然我们的处理逻辑执行了一遍，但是你有没有发现，其实进入到这个preSassLoader的.vue请求是一个也没有减少，我们其实只需要一个.vue文件只进入一次就可以了，而不是这一个文件的4次不同请求都被这个预处理器接收到。
这是因为我们在配置自定义preSassLoader的时候，捕获的是.vue文件而没有匹配resourceQuery后面的请求串，导致只要是.vue?xxx的请求这个预处理器都能接收到。
所以我们自己新建一个rule规则来进行精确匹配：
在vue.config.js中注释掉之前的匹配：
chainWebpack:config=>{
//注释掉
//config.module
//.rule('vue')
//.use('preSassLoader')
//.loader('./src/loaders/preSassLoader');
config.module
.rule('preDeep')
.test(/\.vue$/)
.use('preSassLoader')
.loader('./src/loaders/preSassLoader');
}
就暂时到这儿吧，希望可以解答遇到这个问题时候的你的疑问！