如何实现CSS样式的模块化引入_通过ES6的import语法加载CSS模块-css教程-PHP中文网

import语法本身不能直接加载css，其生效完全依赖构建工具配置；真正实现模块化需结合css modules、scoped css等作用域隔离方案，而非仅靠import加载。

如何实现css样式的模块化引入_通过es6的import语法加载css模块

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 字符串插入到的 <style></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></style> 标签，且支持 HMR（修改保存后样式热更新）
生产构建：默认提取为 .css 文件，通过 <link> 引入（等效于 mini-css-extract-plugin）
不支持 import assert { type: 'css' } —— 这是浏览器原生模块提案，Vite 当前未启用该特性

注意：import assert { type: 'css' } 是浏览器端原生方案（需 <script type="module"></script> + 支持该特性的浏览器），目前仅 Chromium 120+ 实验性支持，且必须搭配 HTTP Server 返回 text/css MIME 类型，实际项目中基本不用。

VitePress Generator

使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

下载

动态 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></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);
  }
}