【问题标题】：VS Code SCSS auto compiling to CSSVS Code SCSS 自动编译为 CSS
【发布时间】：2021-12-11 03:37:12
【问题描述】：

我是编程的初学者，刚刚开始学习 HTML/CSS。对于编码，我开始使用 VS Code。我真的很喜欢它。

到目前为止，我得到的唯一问题是将 SCSS 自动编译为 CSS。我已经搜索并阅读了许多解决方案，我发现最好的是在 VS Code 终端 sass --watch . 中使用 ruby + sass + code 它正在监视我的项目并在创建新的 SCSS 时创建新的 CSS。它正在关注 SCSS 的变化。但问题是每次我启动 VS Code 时都必须输入此代码。

也尝试了 Gulp 文件和 package.json 的解决方案，但也无法使其自动启动。并且必须为每个项目单独制作。我也尝试过 Atom，它有 sass-autocompile package，而且效果很好。所以，对我来说，最简单的方法是使用 Atom 并忘记。但我想使用 VS Code。

因此，通常的问题是是否有可能为 VS Code 创建扩展以自动将 SCSS 编译为 CSS（类似于 Atom 的包，这将是最好的 IMO）。或者也许有人可以用其他方式向我解释如何解决这个问题。

【问题讨论】：

标签： css sass visual-studio-code

【解决方案1】：

你需要两件事：

tasks.json 文件
银翼杀手 VS CODE 扩展

首先在您的项目中创建 .vscode 文件夹。

然后在其中创建具有以下内容的 tasks.json 文件：

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

现在，打开项目后，您可以通过单击Ctrl+Shift+B来运行任务。

要使流程自动化，请使用 Blade Runner 扩展 - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

银翼杀手打开项目后会自动运行任务:)

【讨论】：

谢谢你，加布里埃尔！你的方法有效！它要求在关闭 VS Code 时终止任务，但这不是问题。
但它似乎也在编译“/node_modules”的.scss文件，有什么技巧可以排除它们吗？

【解决方案2】：

或者使用 Easy Compile - 它会在保存时自动编译。

https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile

【讨论】：

请提供更多上下文和更好的解释 - 而不仅仅是链接答案
还有什么要解释的？使用 VSCode 安装 Easy Compile。而已。重新加载，当您使用 scss 文件时，它会在每次保存时自动将其映射到 css。

【解决方案3】：

一个解决方案没有额外的扩展

使用 sass

假设您已全局安装 sass，例如：

npm install -g sass

打开文件夹并在.vscode下创建一个task.json文件包含

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "label": "Watch Sass",
        "type": "shell",
        "command": "sass --watch src/style.sass styles/style.css --style=compressed",
        "problemMatcher": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "runOptions": {
            "runOn": "folderOpen"
        }
    }]
}

使用 node-sass

将上面的sass替换为node-sass。

在这两种情况下，请确保源/目标文件名、位置和扩展名正确（在我的情况下是 src/style.scss 和 style/style.css）

或复制 .vscode-workspace 中的部分以避免混乱。确保根据您的个人需要更改 sass 源文件和目标文件。

现在允许通过

自动运行任务

Ctrl+Shift+P
选择管理自动任务和
选择允许文件夹中的自动任务和
关闭并重新打开您的文件夹（或工作区）

将调用 sass 编译器并开始以令人放心的方式查看您的所有编辑：

Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

或编译失败时出现错误消息。：

Error: semicolons aren't allowed in the indented syntax.
  ╷
7 │     padding: 0;
  │               ^
  ╵
  css\src\_base.sass 7:12  @import
  css\src\style.sass 1:9   root stylesheet

【讨论】：

【解决方案4】：

已经有官方文档了 https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson

我们可以在这里考虑的唯一提示是输入--watch 的参数，只是不要通过每次点击ctrl+shift+b 手动构建。

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass --watch styles.scss styles.css",
      "group": "build"
    }
  ]
}

没有任何插件，你可以在你的项目中创建.vscode文件夹，然后写一些tasks.json

【讨论】：

【解决方案5】：

适用于 Visual Studio Code 的 Easy Compile 或 Live SASS Compiler 扩展。 Live SASS Compiler 可以重新编译所有源代码，而 Easy Compile 只编译单个文件。

Easy Compile 在您保存文件时进行编译，而 Live SASS Compiler 可以监视您的代码并在看到更改时进行编译。您每次都必须手动启动它，而 Easy Compile 开箱即用。

【讨论】：

如何让 Live SASS Compiler 编译所有源代码？我只能让它编译我按保存的文件。