如何更改 sass 输出目录？答案

【问题标题】：How do I change sass output directory?如何更改 sass 输出目录？
【发布时间】：2021-03-13 10:48:28
【问题描述】：

我有这个文件夹结构：

sass/main.sass

css/main.css

js/...

img/...

我希望将 sass 输出转到 css 文件夹，但每次我运行 sass watcher 时，它都会在 sass 文件中的 sass 目录中创建一个新的 css 文件。

【问题讨论】：

看这个答案：stackoverflow.com/questions/42569886/…
你如何编译顺便说一句。你用什么编译器？原始 SASS（仅限终端）？还是通过包/节点/编辑器包含的编译器？
@Brebber 我在 VS Code 中使用了一个名为 Live Sass Compiler 的扩展。

标签： css sass directory

【解决方案1】：

感谢有关在 VS Code 中使用“实时 SASS 编译器”的信息。

要为您的项目设置特殊的输出路径，您需要将输出路径的设置添加到项目的settigns.json：

文件：`projectDIR/.vscode/settings.json'

设置输出目录的保存路径示例：


"settings": {


    // output: generate files to ...
    // ~ = path starts relative from scss-file
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../assets"
        },
        // ad a compressed version
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../assets"
        }

        // optional: add more outputs ...

    ], 

}

另见网络官方示例：https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

附加提示：
关闭“LIVE SASS 编译器”的版本可能已过时

不再支持实际常用的扩展Live Sass Compiler（多年来）。它使用过时的 SASS 版本。该版本不支持@use 等最新功能。如果作者是 'Ritwick Dey'，你就使用那个过时的版本。

但是有一个由“Glenn Marks”构建的具有相同名称“Live SASS Compiler”的受支持的分支。作为 fork，它的工作方式相同，设置几乎相同。或者您可以使用另一个更快的实际编译器，因为您可以在系统上使用直接安装的 SASS 版本。在这种情况下，您需要更改项目的设置。

更新： 更正受支持扩展“Live SASS Compiler”的作者姓名以更正扩展标识。

【讨论】：