css-in-js 不支持引入外部 css 文件，因其设计逻辑与样式作用域隔离、动态响应等核心机制冲突；应改用 css 工具函数转换复用样式，全局样式则需通过传统方式在入口文件引入。
你不能在 CSS-in-JS 方案中「引入」外部 CSS 文件——不是语法不支持，而是设计逻辑根本冲突。
为什么 @import 和 import './xxx.css' 在 styled-components/Emotion 里无效
CSS-in-JS 库（如 styled-components、@emotion/react）不解析或加载外部 CSS 文件。它们只处理 JS 中定义的样式逻辑：
-
@import是 CSS 规则，只能在<style></style>块或 .css 文件里生效；而 CSS-in-JS 生成的样式是 JS 执行后注入<style></style>标签的内容，此时 CSS 解析早已结束 -
import './Button.css'是构建工具（如 Webpack/Vite）的行为，它把 CSS 当作模块处理并注入全局样式表——这和 CSS-in-JS 的作用域隔离、按需注入、主题响应等机制完全背道而驰 - 即使你强行在组件里写
import './theme.css';，它会变成全局样式，破坏组件级封装，且无法通过props或theme动态更新
想复用已有 CSS 规则？别“引入”，改用 css 工具函数转换
如果你有一组已有的 CSS 规则（比如从设计系统文档里抄来的按钮样式），不要试图把它塞进 .css 文件再“导入”，而是用库提供的 css 函数转成 JS 对象：
- Emotion：
const buttonBase = css({ padding: '8px 16px', borderRadius: '4px', border: '1px solid #ccc' }); - Styled Components：
const buttonBase = css`padding: 8px 16px; border-radius: 4px; border: 1px solid #ccc;`; - 然后在组件中复用：
const PrimaryButton = styled.button(buttonBase, { backgroundColor: 'blue' }); - 这样既能复用样式逻辑，又能保持动态能力（比如根据
props.variant插入不同背景色）
需要全局重置或第三方库样式？绕过 CSS-in-JS，走传统路径
某些样式天生就不该进组件作用域：CSS Reset、Normalize、Antd/Bootstrap 的全局样式、字体声明等。这些必须脱离 CSS-in-JS 流程：
- Next.js：在
app/globals.css或pages/_app.tsx里import 'antd/dist/reset.css'; - React + Vite：在
main.tsx顶部import './assets/base.css'; - 注意顺序：全局 CSS 必须在 CSS-in-JS 渲染前加载，否则可能被覆盖或触发 FOUC
- 不要把
import 'bootstrap/dist/css/bootstrap.css';放在某个组件文件里——它不是组件的一部分，也不随组件卸载而清理
真正容易被忽略的点是：CSS-in-JS 不是“另一种写 CSS 的方式”，它是“用 JS 管理样式生命周期”的方案。一旦你开始想“怎么把 CSS 文件塞进去”，就已经在对抗它的核心价值了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
