如何将SCSS编译生成的CSS按对应目录结构分离存储到独立CSS文件夹

方案1：正确配置VS Code Live Sass Compiler #

你之前修改路径不生效是配置参数不对，按照以下方式修改VS Code的settings.json即可实现需求：

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/../../css",
        "savePathReplacementPairs": null
    }
],
"liveSassCompile.settings.generateMap": true,
// 无需下划线前缀禁止编译的话，清空partialsList配置即可编译所有scss文件
"liveSassCompile.settings.partialsList": []

核心逻辑是savePath参数相对于单条scss文件的路径做回退，从styles/scss/[子目录]/回退两层到styles目录，再进入css目录，编译器会自动保留scss的嵌套层级结构生成对应目录。

方案2：使用Sass官方CLI工具编译 #

如果不依赖编辑器插件，直接安装官方sass包，通过命令行即可实现目录结构的完整映射：

1. 全局安装sass：npm install -g sass
2. 项目根目录执行监听命令：

sass --watch --source-map styles/scss:styles/css

命令中冒号前为scss源目录，冒号后为css输出目录，官方工具会自动1:1复刻scss目录的所有层级结构到css目录下，完全匹配你的预期效果。

方案3：项目构建工具配置 #

如果你的项目使用Vite/Webpack/Gulp等构建工具，做简单配置即可实现：

• Vite：在vite.config.js中配置css输出路径，无需额外处理层级结构，构建工具会自动映射
• Webpack：在sass-loader的output配置项中指定css输出路径为styles/css即可
• Gulp：使用gulp-sass插件时，将dest输出路径指定为styles/css，会自动保留原有目录结构

内容的提问来源于stack exchange，提问作者001