import语法本身不能直接加载CSS，其生效完全依赖构建工具配置；真正实现模块化需结合CSS Modules、Scoped CSS等作用域隔离方案，而非仅靠import加载。
import 语法本身不能直接加载 CSS——它只认 JavaScript 模块。你看到的 import './style.css' 能工作，完全依赖构建工具（如 Webpack、Vite）的 loader 配置，不是语言原生能力。
Webpack 里 import CSS 为什么能生效
因为 css-loader + style-loader（或 mini-css-extract-plugin）接管了对 .css 文件的处理：
-
css-loader解析@import和url()，把 CSS 转成 JS 模块导出（通常是字符串或对象） -
style-loader把导出的 CSS 字符串插入到<head>的<style>标签中 - 如果你用的是
mini-css-extract-plugin，它会把 CSS 提取为独立文件，靠<link>加载
没有这些 loader，import './index.css' 会直接报错：Cannot find module './index.css' 或 Unexpected token 'export'。
Vite 中 import CSS 的行为差异
Vite 默认支持 import './foo.css'，但底层逻辑和 Webpack 不同：
立即学习“前端免费学习笔记（深入）”；
- 开发时：CSS 内容被注入
<style>标签，且支持 HMR（修改保存后样式热更新） - 生产构建：默认提取为
.css文件，通过<link>引入（等效于mini-css-extract-plugin） - 不支持
import assert { type: 'css' }—— 这是浏览器原生模块提案，Vite 当前未启用该特性
注意：import assert { type: 'css' } 是浏览器端原生方案（需 <script type="module"> + 支持该特性的浏览器），目前仅 Chromium 120+ 实验性支持，且必须搭配 HTTP Server 返回 text/css MIME 类型，实际项目中基本不用。
动态 import() 加载 CSS 的陷阱
你不能写 await import('./theme.css') 并期待它“生效”——这在绝大多数构建工具中会失败或静默忽略：
- Webpack：不支持动态
import()加载非 JS 资源（除非额外配置webpack.config.js的resolve.extensions和自定义 rule） - Vite：动态
import('./x.css')会返回一个空模块（{ default: undefined }），CSS 不会被注入 - 真正可行的动态样式切换，应改用
link标签手动切换href，或用 CSS-in-JS 方案（如useEffect插入<style>）
示例（安全的动态样式加载）：
function loadTheme(href) {
const link = document.querySelector('link[data-theme]');
if (link) link.href = href;
else {
Object.assign(document.createElement('link'), {
rel: 'stylesheet',
'data-theme': '',
href
}).appendTo(document.head);
}
}CSS 模块化真正的关键不在 import，而在作用域
所谓“模块化”，核心是避免全局污染。单纯 import './button.css' 只是加载，不等于样式隔离：
- 普通 CSS：所有选择器仍是全局的，
.btn会污染整个页面 - 要真正模块化，得用 CSS Modules（文件名写成
Button.module.css），配合构建工具生成哈希类名 - 或者用 CSS-in-JS（如 Emotion）、Scoped CSS（Vue 的
<style scoped>）、Shadow DOM
别把“能 import 就等于模块化”当成事实——那只是资源加载方式，不是作用域控制手段。最容易被忽略的一点：很多人配好了 CSS Modules，却在组件里仍写 className="btn" 而不是 className={styles.btn}，结果白配。
