为什么 Vue 的组件库往往需要单独引入样式文件，而 React 组件库往往不需要？

Question

React 的绝大部分组件库，在使用组件时都非常简单：import { Button } from "xxx" 就可以了。

但是 Vue 的很多组件库，要么需要使用 Babel 插件来帮你做 import，要么全局 import，要么只能手动：

import { Button } from 'xxx';
import 'xxx/styles/button';

这里很好奇的是，为什么 import 'xxx/styles/buton' 不能自带在 Button 这个 js 中呢？

Answer 1

猜测是因为React的 UI库比较流行 css-in-js 的缘故？

但是主流的 Vue UI库也不需要单独引入样式啊，都是只需要 import 组件就好了呀。并不需要再单独去引入组件的CSS样式。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

你说的情况应该是自定义引入组件库某个组件下发生的吧
可能vue的把css也单独分包了
其它的则是把某一组件以完整（html,js,css）的形式导出

Answer 3

这是因为Vue和React在组件的样式隔离上做法不一样，Vue组件的样式隔离是通过scopedCSS实现的，而React组件的样式隔离是通过 CSS-in-JS实现的。

Answer 4

要么就是样式存在在对应的组件中了，加载组件就是加载了样式，要么就是通过编译插件实现自动化引入。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。