vue+webpack4 +mini-css-extract-plugin 会打包出空的css 文件，如何解决

Question

vue+webpack4 +mini-css-extract-plugin 使用了按需加载模式，在vue 文件里写了空的style 标签 就会打包出空的css 文件 如何过滤掉这种空文件

Answer 1

相同问题：https://segmentfault.com/q/10...

应该还有其他解法，但是我目前只发现修改 mini-css-extract-plugin 源码可以实现过滤效果。

以下是我的答案

---

const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === MODULE_TYPE && module.content);

• vue-loader 负责解析 .vue 文件，转换成 import style0 from "./index.vue?vue&type=style&index=0&id=2887040a&lang=sass&scoped=true&"。 因为内部也没有解析 css、sass，所以对于 注释、无效代码无法剔除。

  
  <style lang="sass" scoped>
  // 123
  /**
  
  456
  */
  
  // .red{color: red}
  .red{}
  </style>

• sass-loader、css-loader 输出结果就是只有有效代码，但是内部没有找到可以过滤的地方。
• vue-style-loader 没有发现被调用。
• mini-css-extract-plugin 中发现chunk的逻辑，把空内容过滤掉即可。

mini-css-extract-plugin源码解析 https://blog.csdn.net/vv_bug/...

Answer 2

该组件没有自定样式为何要写style标签呢？这是代码本身的问题