背景

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