核心在于outputstyle控制编译格式：开发用nested/expanded保结构可读，生产用compressed减体积；需禁用dev环境css.minify、启用source map并优先用@use替代@import。
SCSS 编译后 CSS 可读性差，核心不是语法问题，而是编译器默认输出扁平、无结构、无上下文的 CSS —— 比如嵌套层级全展平、媒体查询被复制多份、选择器重复冗长。解决它不靠“写得更漂亮”，而靠控制 css-loader、sass 或构建工具本身的编译风格参数。
用 sass 的 outputStyle 控制生成格式
SCSS 文件本身不决定最终 CSS 格式，真正起作用的是 Sass 编译器的 outputStyle 选项。它有四个值：nested、expanded、compact、compressed。开发阶段必须设为 nested 或 expanded，否则断点调试时根本找不到对应行。
-
nested：保留原始嵌套缩进，每条声明独占一行，适合调试；但会把@media块内联展开，导致重复代码 -
expanded：最易读：选择器和声明都换行，空行分隔逻辑块，@media单独成块不内联，VS Code 折叠体验好 -
compact和compressed：仅用于生产，前者单行选择器，后者完全压缩（无空格/换行/注释）
Vite 中配置示例：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler', // 必须显式启用新 API 才支持 outputStyle
outputStyle: 'expanded'
}
}
}
})
Webpack + sass-loader 则需在 options.sassOptions 下传入。
禁用 css-loader 的自动压缩（尤其 Vite 默认开启）
Vite 5.0+ 默认对 CSS 启用 minify，即使你设了 outputStyle: 'expanded'，最终产物仍可能被二次压缩成单行、去空格、删注释——这直接废掉所有可读性努力。
- 开发环境务必关闭：
css.minify = false - 检查是否被插件覆盖：比如
vite-plugin-css-minify或自定义build.rollupOptions.plugins里误加了 CSS 压缩 - 确认生效方式：启动 dev server 后，打开浏览器开发者工具 → Elements → 查看某元素的样式来源，点进去看是不是带换行和缩进的原始格式
避免 @import 被 Webpack/Vite 处理成内联字符串
SCSS 的 @import 在现代构建中常被工具链劫持：Webpack 的 css-loader 会把 @import './vars.scss' 当作 JS 模块处理，结果是整个文件内容被拼成一长串字符串注入，失去源码映射、无法跳转、调试时看不到原始文件路径。
- 改用
@use：它是 Sass 官方推荐替代方案，天然支持模块化和源码定位 - 如果必须用
@import，确保它只出现在.scss文件中，且构建配置未启用css-loader的importLoaders或url选项干扰 - Umi4 用户注意：
cssLoader.modules.auto若设为true，会强制将所有@import视为模块，导致非模块文件被错误处理
Source map 必须启用且指向 .scss 文件
没有正确的 source map，再好的编译格式也白搭——点击 DevTools 里的 CSS 行号，跳转的必须是 Button.scss:23，而不是 style.css:1872。
- Vite：默认开启
css.sourceMap = true，但需确认未被build.sourcemap = false全局关闭 - Webpack：
css-loader的sourceMap: true+sass-loader的sourceMap: true必须同时开启 - 关键验证点：在 DevTools 的 Sources 面板下，展开
webpack://或vite://，应能看到完整的.scss文件树，而非只有.css
真正影响可读性的从来不是 SCSS 写法本身，而是构建链路中那些默认开启、却没人检查的“优化”开关。一个 outputStyle 设错，或一个 minify 没关，就足以让整套注释规范和模块划分失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
