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

我们知道通过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到底是怎么做的呢?

阅读 2.4k
1 个回答

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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题