背景
项目中使用了webpack/vue/less, 开发时配置了style-loader, 一直很满意，直到遇到一个问题
问题
某个vue组件中引用了一个less样式，一直不生效。马上到页面的dom里，按html/head/styles中去找，
- 首先看看有没有生成并插入到dom中
-
然后再看有没有被正确的按Loader处理
默认插入的style
几翻下来，眼都要瞎了，因为自动插入的style有很多，根本不知道是哪个less
就需要根据less的内容，人脑编译一遍，然后再人工匹配
简单less还好，头部添加一些注释或者其他标识，但如果有@import, 被import的less中的注释也会保留，增加了难度
于是产生一个想法
解决
在style-loader或者css-loader在处理css的时候，直接把文件路径等信息以注释的形式添加到头部
我们在审查的时候，就可以根据头部的注释信息知道这是哪个less源文件，以及他的目录，
这样再检查哪些文件被插进来，哪些没有，处理的对不对等，都有了更好的跟踪
修改css-loader在css content中添加注释
修改css-loader在css content中添加注释
结果
image.png
进一步
在style-loader将css内容添加到dom时，将源文件路径以自定义属性的方式加到style标签上，这样不用展开style看内容就可以知道里边是什么了
修改style-loader，在addStyle时，将resourcePath添加到style的属性上
添加到style上
