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到底是怎么做的呢?


回答:

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

以上是 vue-cli是怎么将.vue文件和.scss文件中的样式抽离出来生成单独的.css文件的? 的全部内容, 来源链接: utcz.com/p/933565.html

回到顶部