直接@import "xxx.css"会原样输出为@import url("xxx.css")，不参与SCSS编译、不解析路径、不处理变量，导致404、阻塞渲染且脱离构建流程控制。
直接@import "xxx.css" 会原样输出 @import url()，不是你想的“嵌入”
SCSS 编译器（Dart Sass）遇到带 .css 扩展名的 @import，会放弃编译、直接转成标准 CSS 的 @import url("xxx.css")。这意味着：它不参与构建流程、不走 Webpack/Vite 的资源解析、字体图片路径大概率 404，且浏览器会阻塞渲染等待该请求完成。
常见错误现象：
-
@import "normalize.css"→ 编译后变成@import url("normalize.css");，但实际文件在node_modules/normalize.css/normalize.css - 控制台报
Failed to load resource: the server responded with a status of 404 () - 样式生效了，但和 JS 加载顺序无关，纯靠浏览器兜底——这在 SSR 或离线场景下不可靠
实操建议：
- 删掉所有带
.css后缀的@import，哪怕它看起来“能跑通” - 确认你要引入的是纯 CSS 库（如
highlight.js/styles/github.css、github-markdown-css），而非提供 SCSS 源码的库（如 Bootstrap 的scss/目录） - 这类文件根本不该进 SCSS 编译流水线——它们没有变量、mixin、嵌套逻辑，硬塞进去只会增加路径解析失败概率
Webpack 项目中应改用 JS import，由 css-loader 处理路径和 hash
把第三方 CSS 当作模块资源交给构建工具统一管理，才是现代工程实践。Webpack 需要 style-loader + css-loader 配合才能正确解析 node_modules 内路径、重写 url()、生成 contenthash。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在入口 JS 文件（如
main.ts）中写：import 'highlight.js/styles/github-dark.css'; - 确保 Webpack 配置含
module.rules对.css的处理，例如：{ test: /\.css$/, use: ['style-loader', 'css-loader'] } - 不要配
resolve.alias或sass-loader.includePaths去“适配”这种导入——那是给 SCSS 源码用的，不是给纯 CSS 的 - 如果用了 CSS Modules，第三方 CSS 必须显式转为模块：
import styles from 'bootstrap/dist/css/bootstrap.css'（此时 class 名会被哈希，需配合:global{}或compose解决作用域冲突）
Vite 项目推荐两种方式：JS import 或 HTML link，避开 SCSS 层
Vite 默认不通过 SCSS 编译器处理 .css 文件，@import "xxx.css" 在 .scss 里依然会退化为 @import url()。Vite 的优势在于对 JS import 的原生支持更稳定。
实操建议：
- 首选 JS import：
import 'element-plus/theme-chalk/index.css'—— 路径由 Vite 的 resolver 自动定位，支持别名、HMR、自动 hash - 次选 HTML link：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css">—— 简单、CDN 缓存友好、不占用构建时间 - 避免
@use "npm:xxx.css"—— 这是无效语法，Vite 不支持@use加载纯 CSS；@import "npm:xxx"仅限 Vite 4.3+ 且只对部分包有效，不稳定 - 若必须用 SCSS 入口统一管理样式，把第三方 CSS 的 import 移到单独的
vendor.css，再在 HTML 中<link>引入，与 SCSS 编译解耦
真正需要 SCSS 层介入的，只有提供 .scss 源码的库（如 Bootstrap、Bulma）
如果你要复用的是变量、函数或 mixin（比如 bootstrap/scss/functions），那才轮到 SCSS 模块系统上场。这时你不是“嵌入 CSS”，而是“加载逻辑”。
实操建议：
- 用
@use而非@import：@use "npm:bootstrap/scss/functions" as bs;—— 安全，不输出任何 CSS - 入口文件只
@use需要的模块，别@use "npm:bootstrap/scss/bootstrap"—— 它会全量输出 CSS，失去按需控制能力 - Webpack 下确保
sass-loader开启webpackImporter: true并配置includePaths: [path.resolve(__dirname, 'node_modules')]，否则@use "bootstrap/scss/mixins"会报Can't resolve - Vite 下直接
@use "npm:bootstrap/scss/mixins"即可，但注意 Vite 4.3+ 才支持，旧版需改用@use "bootstrap/scss/mixins"+css.preprocessorOptions.sass.includePaths
最常被忽略的一点：无论你怎么引入，只要最终输出了 .btn { } 这样的规则，它就一定会污染全局样式表。SCSS 本身无法隔离 CSS 作用域——这不是路径或语法问题，是 CSS 机制决定的。真要隔离，得靠 CSS Modules、Shadow DOM 或 iframe。
