vue在sfc中写样式和引入外部样式有什么区别？

  • Z时代
  • 2024-02-21
  • 分类：IT

官方原话

SFC 中的 <style> 标签一般会在开发时注入成原生的 <style> 标签以支持热更新，而生产环境下它们会被抽取、合并成单独的 CSS 文件。

sfc中写样式在组件复用时会增加文件体积？

回答：

增不增加文件体积看你webpack或vite怎么配置，现在默认配置都对这方面做了很大的优化，所以我认为不用很担忧这方面。

写在外部的话，可能过段时间你会发现你找不到这个样式你写在哪了，很不利与维护，而且也违背了组件自成一体的宗旨

回答：

SFC 中写的样式文件大部分的人多半会开启 scoped。
而单独的样式文件一般来说就会是类似于 BEM 这种命名方式来命名。

最终他们都会被合并输出成单独的CSS文件，并不是内联的形式来添加到页面当中。
而组件的 scoped 属性也会在打包编译的时候被固定，所以复用的组件其实也是同一个 CSS 类。

只不过说，如果开启了 scoped 你生成的 CSS 以及 HTML 内容里面就会多一个 data-v-xxx 这样的 scoped 属性。但其实不开启也是没问题，只要你的命名方式其实有规律可循的。

以上是 vue在sfc中写样式和引入外部样式有什么区别？ 的全部内容， 来源链接： utcz.com/p/933086.html

回到顶部