2018-04-19 style-loader&css-loader一点修改

背景

项目中使用了webpack/vue/less, 开发时配置了style-loader, 一直很满意,直到遇到一个问题

问题

某个vue组件中引用了一个less样式,一直不生效。马上到页面的dom里,按html/head/styles中去找,

  • 首先看看有没有生成并插入到dom中
  • 然后再看有没有被正确的按Loader处理


    2018-04-19 style-loader&css-loader一点修改_第1张图片
    默认插入的style

几翻下来,眼都要瞎了,因为自动插入的style有很多,根本不知道是哪个less
就需要根据less的内容,人脑编译一遍,然后再人工匹配
简单less还好,头部添加一些注释或者其他标识,但如果有@import, 被import的less中的注释也会保留,增加了难度

于是产生一个想法

解决

在style-loader或者css-loader在处理css的时候,直接把文件路径等信息以注释的形式添加到头部
我们在审查的时候,就可以根据头部的注释信息知道这是哪个less源文件,以及他的目录,
这样再检查哪些文件被插进来,哪些没有,处理的对不对等,都有了更好的跟踪

修改css-loader在css content中添加注释

2018-04-19 style-loader&css-loader一点修改_第2张图片
修改css-loader在css content中添加注释

结果

2018-04-19 style-loader&css-loader一点修改_第3张图片
image.png

进一步

在style-loader将css内容添加到dom时,将源文件路径以自定义属性的方式加到style标签上,这样不用展开style看内容就可以知道里边是什么了

修改style-loader,在addStyle时,将resourcePath添加到style的属性上

2018-04-19 style-loader&css-loader一点修改_第4张图片
添加到style上

你可能感兴趣的:(2018-04-19 style-loader&css-loader一点修改)