背景

项目中使用了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上