VS Code SCSS 自动编译成 CSS

Question

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

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

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

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

Answer 1

您将需要两件事：

• task.json文件
• VS CODE的Blade Runner扩展

首先在项目中创建.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

打开项目后，Blade Runner将自动运行任务:)

Answer 2

无需额外扩展的解决方案

带着骚

假设您在全球范围内安装了 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 源文件和目标文件。

现在允许自动运行任务

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

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

Answer 3

或使用简易编译-保存时会自动编译。

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

Answer 4

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

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

Answer 5

已经有一个官方文件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