scss @import 相对路径在 windows 下报错并非系统问题，而是构建工具将反斜杠当作转义字符处理导致解析失败，必须统一使用正斜杠（如 @import "../../styles-config"）；url() 中的相对路径因浏览器以 css 文件位置为基准解析，打包后易 404，应改用变量插值或配置别名与 includepaths 确保跨平台稳定。
SCSS @import 相对路径为什么在 Windows 下报错
不是 Windows 本身的问题，而是 @import 的路径被构建工具（如 Webpack、Vite、Angular CLI）传给 Sass 编译器时，反斜杠 \ 被当作了字符串转义字符处理，导致路径解析失败。比如 @import "..\..\styles-config" 在 Windows 上会被解析成非法转义序列，而 @import "../../styles-config" 才是合法的相对路径写法。
常见错误现象：Can't find stylesheet to import 或直接静默跳过导入，样式不生效。
- 所有 SCSS 文件内
@import必须用正斜杠/，哪怕你在 Windows 系统上编辑 - 路径开头不能有空格或不可见字符（尤其从文档复制时容易带入）
-
./和../是相对路径标准写法，但不要写成.\或..\ - 如果项目用了
@use，路径规则一样，但必须确保被@use的文件以_开头（如_mixins.scss），否则 Dart Sass 会忽略
url() 中的 ./../ 路径为何构建后总 404
url() 里的路径从不经过构建工具的模块解析系统，它只是原样输出到最终 CSS 中；浏览器加载 CSS 时，才以该 CSS 文件的部署位置为基准解析相对路径。所以问题不在你写的路径对不对，而在你是否控制了 CSS 输出位置和资源实际部署结构。
典型表现：开发时一切正常，打包后 url(../fonts/icon.woff) 返回 404，因为生成的 CSS 文件可能在 /assets/css/，而字体在 /assets/fonts/，相对路径就断了。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 永远不要在
url()里写./或../—— 构建后 CSS 位置不确定，相对路径必然失效 - 改用变量插值：
$font-icon: "/assets/fonts/icon.woff"; background: url(#{$font-icon}); - Vite 用户若用
url('@/assets/icon.png')，必须在vite.config.ts中配置resolve.alias，且别名值结尾加/（如"@/": path.resolve(__dirname, "src/") + "/"） - Webpack 用户需确保
css-loader的url: true开启，并让file-loader或url-loader的include覆盖第三方库路径
Vite/Webpack 中如何让 ~ 别名在 SCSS 里生效
~ 前缀在 SCSS 中默认无效，它不是 Sass 标准语法，而是构建工具 loader 层的扩展机制。Webpack 需要 sass-loader 显式开启 webpackImporter: true；Vite 则完全不支持 ~，必须靠 alias + includePaths 组合实现等效效果。
常见错误：写了 @import "~bootstrap/scss/bootstrap" 却报 Can't resolve，或控制台无报错但样式没加载（~ 被当普通字符串忽略）。
- Webpack：在
sass-loader的options中必须写webpackImporter: true，且includePaths要包含node_modules - Vite：删掉所有
~，改用@/styles这类 alias，并在vite.config.ts的css.preprocessorOptions.sass.includePaths中重复声明真实路径 - 别名路径末尾必须带
/，否则@import "@/styles/_vars"可能匹配失败 - TS 项目还需同步配
tsconfig.json的compilerOptions.paths，否则 VS Code 无法跳转
SourceMap 行号跳转不到 .scss 文件怎么办
这不是 SourceMap 没生成，而是映射链断在某一层：Dart Sass 编译、CSS 处理、最终输出三者中任一环节漏配 sourceMap: true，都会导致浏览器看到 CSS 行号却点不开源文件。
典型症状：CSS 文件有 sourceMappingURL，但点击跳转打开的是空白页或 404；或者开发者工具里 Sources 面板看不到 .scss 文件。
- Dart Sass CLI 必须显式写
sass --source-map src/main.scss dist/main.css，参数顺序不能颠倒 - Webpack 中
sass-loader、css-loader、MiniCssExtractPlugin都要设sourceMap: true，且devtool不能用eval类模式 - Vite 必须同时开两个开关：
css.devSourcemap: true和css.preprocessorOptions.sass.sourceMap: true，拼写和大小写都不能错 - 生成的
.map文件中sources字段应为项目内可访问的相对路径（如["button.scss"]），不能含绝对路径或越界路径
@import 能否命中，取决于你用的构建工具、loader 版本、Sass 实现（Dart Sass 还是已弃用的 node-sass）、甚至 IDE 插件是否适配。调试时别只盯着 SCSS 文件本身，得顺着构建流程一层层看日志和输出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
