Vue中import CSS走模块解析，@import仅文本拼接且不支持别名；React必须显式import，不支持@import跨文件生效；postcss-import仅解决单项目路径映射，无法跨项目复用或隔离作用域。
为什么 import 一个 CSS 文件在 Vue 和 React 里行为不一致
因为构建工具（Vite、Webpack）对 @import 和 JS 模块级 import 的处理逻辑完全不同：前者是 CSS 预处理器阶段的文本拼接，后者是模块图里的依赖声明。Vue 单文件组件中的 <style src="..."></style> 会走模块解析，而 @import 在 <style></style> 块里默认不支持路径别名、不参与 HMR 热更新、也不校验文件存在性。
- 用
import "@/styles/base.css"替代@import "@/styles/base.css"—— 确保路径被 Webpack/Vite 正确解析和监听 - Vue 中若坚持用
@import，必须配合lang="scss"或lang="less"，且路径不能含@/别名，得写相对路径或绝对路径（如@import "../../../styles/base.css"） - React（+ CRA 或 Vite）根本不支持
@import语法跨文件生效，CSS 文件必须显式import，否则样式不会注入到 DOM
postcss-import 能解决跨项目复用吗
它只能解决「单个项目内」的 CSS @import 路径解析问题，比如把 @import "vars"; 映射到 node_modules/my-preset/css/vars.css。但它不处理模块作用域、不参与构建产物分包、也不能让 A 项目的 CSS 类名自动在 B 项目里可用。
- 启用前提：你用的是 PostCSS 流程（如
postcss.config.js），且已安装postcss-import - 配置中必须设
path数组，例如["node_modules", "../shared-styles"]，否则@import "reset"找不到文件 - 它无法规避 CSS 全局污染 —— 导入的
.btn依然会覆盖当前项目里同名类，不是“作用域隔离”方案 - 如果目标是“复用并定制”，更稳妥的是导出 CSS 变量 +
:where()封装，而不是靠@import拼接
用 css-modules 还能跨项目共享样式吗
可以，但必须放弃直接复用类名字符串，转为复用生成后的 className 对象。CSS Modules 本身不跨构建上下文，所以不能把 A 项目编译后的 Button.module.css 直接 import 到 B 项目里用 —— 因为 B 项目会重新哈希类名，导致样式失效。
- 正确做法：把源文件（如
button.module.css）作为 npm 包发布，B 项目yarn add @myorg/styles后，再import styles from "@myorg/styles/button.module.css" - 注意：两个项目 PostCSS / CSS Modules 配置需一致（尤其是
localIdentName），否则即使同名 class，哈希结果不同，styles.primary指向的类名字符串就不匹配 - 若想零配置复用，改用
vanilla-extract或Linaria—— 它们在构建时生成静态类名，不依赖运行时哈希
从 node_modules 引入 CSS 时，为什么有些样式没生效
常见原因是构建工具默认忽略 node_modules 下的 CSS 处理流程，尤其当该包未在 package.json 的 exports 字段中声明 CSS 入口，或使用了非标准扩展名（如 .pcss、.sss）。
立即学习“前端免费学习笔记（深入）”；
- 检查该包是否在
package.json中有"style": "dist/index.css"字段；没有的话，手动import "some-lib/dist/index.css"，别只import "some-lib" - Vite 用户需确认
vite.config.ts中css.preprocessorOptions是否覆盖了该包路径（如includePaths: ["node_modules/some-lib/src"]） - Webpack 用户要检查
resolve.alias和module.rules是否包含对node_modules/**/*.(css|scss)的处理规则；默认 Webpack 5 不处理node_modules里的 Sass - 错误信息如
Can't resolve 'xxx.css'通常意味着路径写错或包未导出该文件；Failed to execute 'insertRule' on 'CSSStyleSheet'则多因 CSS 语法错误（如漏了分号、用了不支持的函数）
跨项目同步样式的真正难点不在“怎么引入”，而在“怎么保证变量、断点、命名空间三者始终一致”。一旦团队里有人绕过约定直接改 variables.css，所有下游项目就悄悄脱节了——这种问题不会报错，只会让 UI 渐渐走样。
