vue-cli是怎么将.vue文件和.scss文件中的样式抽离出来生成单独的.css文件的？

作者站长头像
站长
· 阅读数 9

我们知道通过vue-loader可以将配置好的CSS、JS相关loader应用到.vue文件中的CSS和JS代码块上，比如你在.vue文件中使用的scss来编写样式，vue-loader可以将scss-loader应用到.vue文件中的scss。现在我有两个疑问，每次打完包，都可以看到包里面的css文件夹中有很多chunk-[hash].css的文件，这些文件是怎么被单独从.vue文件中抽离出来的？这些文件名称是怎么生成的？

据我所知将css单独抽离出来生成文件的是使用MiniCssExtractPlugin来做这件事件的,但是我使用vue相关命令将vue-cli中webpack配置打印出来，发现并没有这个插件，那vue-cli到底是怎么做的呢？

回复
1个回答
avatar
test
2024-07-11

vue-loader的理解是对的。但是@vue/cli的说法不太严谨，@vue/cli现在是一个完整的工具集，它具有更多的功能，实际上承担webpack打包任务的是@vue/service这个子包。

所以实际上是mini-css-extract-pulgin 实现了css extract的功能你可以在这里看到关于css extract plugin的配置https://github.com/vuejs/vue-...

css extract 只在build的模式使用，因为我们在dev环境应该直接style标签内联以更好的style hot reload。所以你应该使用production mode inspect

vue-cli-service inspect --mode=production
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容