VIsual Studio 代码 - 实时 Sass 编译器未生成。css 文件位于单独的 css 文件夹中

Question

我正在尝试将我的 css 文件的保存位置设置为 Live Sass 编译配置中它自己的 css 文件夹（Live Sass 编译 > 设置：格式）

我尝试将 savePath 设置为“/css” - 在此之后 - 我尝试保存我的 main.scss 文件，该文件应该生成一个 css 文件夹，其中包含一个 main.css 文件。 但是，它只是在与我的 main.scss（位于 scss 文件夹中）相同的文件夹中生成一个 main.css 文件。

我已尝试卸载并重新安装 VSC，但我之前的设置已保存。

{
“格式”：“扩展”，“extensionName”：“.css”，“savePath”：“/css”，“window.zoomLevel”：0，“editor.tabSize”：2，“editor.wordWrap”：“关闭“}

上面的代码是 my.json 文件中显示的所有代码。 前 3 行变灰/涂黑（保存路径的格式）。

my.json 文件中的显示与我在教程中找到的有很大不同。

Answer 1

我强烈建议您避免将其用于 sass。 请改用 node-sass。 它的设置和运行非常容易：只需从命令行安装它： npm i node-sass -g并在后台运行它： node-sass [entry path-to-file] [output-path-to-file] -w -w监视您的.sass 或.scss 文件中的更改并立即编译！

Answer 2

在您的settings.json 。json 将路径形式"\css"重命名为"\\css"

像这样：

        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "\\css"
        }

不用担心 VS Code 是如何理解文件路径的。 不是你的错：）

Answer 3

为子 scss 文件中的每次更改刷新主 css 文件 (ctrl+s)

Answer 4

确保重命名 sass 主文件 style.scss。

如果您的 sass 主文件在名称前有下划线，例如 _style.scss，您的实时 sass 编译器将不会生成 .css 文件。

因此，将您的主要 sass 文件从 _style.scss 重命名为 style.scss。