@use不能直接引入.css文件，因其仅支持.scss/.sass模块；正确做法是新建下划线开头的包装文件（如_normalize.scss），用css规范的@import引入css，再通过@use调用该包装文件。
@use 不能直接引入 .css 文件，这是设计使然
写 @use "normalize.css" 必然报错，错误信息类似 Invalid CSS after ""。因为 @use 只解析 Sass 模块（.scss 或 .sass），遇到纯 CSS 开头的 /* 就直接拒绝。这不是路径写错了，是语法层级不匹配。
你真正需要的不是“让 Sass 去找 CSS”，而是把 CSS “包装”成一个合法的 Sass 模块。这个包装层必须满足两个条件：文件名以 _ 开头（如 _normalize.scss），且内部只用 CSS 规范的 @import 引入目标 CSS。
-
@import语句必须在顶层、无缩进、无其他 Sass 逻辑包裹，否则会被当作 Sass 语法解析而失败 - 包装文件里不能出现
@use、$variable、@mixin等任何 Sass 特性 - 最终输出的 CSS 会保留原
@import url(...)语句，由浏览器加载
路径写错的典型表现和验证方法
即使包装好了，@use "_normalize" 还是报 File to import not found，说明路径没对上。Sass 查找路径始终以当前 .scss 文件为基准，不是 HTML 页面位置，也不是 Webpack 的 resolve.alias。
常见错误包括：
- 写了
@use "src/assets/_normalize"—— 这是相对路径，但 Sass 不会自动补.scss，也不认src/这种项目根写法 - 用了
@use "~/assets/_normalize"却没配 Webpack 的resolve.alias或 Vite 的resolve.alias，~就只是字面字符 - 实际文件叫
_normalize.scss，但导入时写成@use "normalize"（缺下划线）或@use "_normalize.css"（错扩展名）
验证方式：打开浏览器开发者工具 → Network → 刷新页面 → 看是否有 404 请求，点进去看 “Request URL” 是什么，再对比文件真实路径。
includePaths 配置生效的前提和陷阱
includePaths 只对 @use 和 @import 中的裸名起作用（比如 @use "normalize"），它不会影响 @use "./path/to/file" 这种相对路径。
配置前必须确认三点：
- 路径必须是绝对路径，例如
path.resolve(__dirname, 'src/assets')，而不是字符串"src/assets" - 路径末尾不能带斜杠：
"src/assets/"在某些 Dart Sass 版本中会被忽略 - 配置位置因构建工具而异：Angular CLI 要写在
angular.json的stylePreprocessorOptions.includePaths；Vite 要写在vite.config.ts的css.preprocessorOptions.sass.includePaths
即使配对了，@use "normalize" 仍可能失败——因为 includePaths 只查 normalize.scss 或 _normalize.scss，如果文件名是 normalize.css，它根本不会被扫描。
图片路径在 Sass 中失效的根本原因
当 _normalize.scss 里没图片，但你的 button.scss 里有 background: url("../images/icon.png")，编译报错“找不到图片”，问题不在 CSS 引入路径，而在 Webpack/Vite 的 url-loader 或 asset-module 解析逻辑。
Sass 编译器只负责文本替换，url() 里的路径由后续 loader 处理。关键点：
- 如果
@import是在<style lang="scss"></style>里写的，loader 默认把url()当作相对于该.vue文件的位置解析 - 如果
require('./styles/button.scss')是在 JS 里引入的，loader 才按button.scss自身位置解析url() - 统一解法：在
url()前加~前缀（如url("~@/assets/images/icon.png")），前提是构建工具已将@alias 到项目 src 目录
路径问题从来不是单点故障，而是 Sass 解析、构建工具模块解析、loader 资源处理三层逻辑叠加的结果。改一处，得同步核对另外两处是否对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
