VS Code SCSS 自动编译为 CSS

Question

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

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

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

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

原文由 Janis.B 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 goodhyun 发布，翻译遵循 CC BY-SA 4.0 许可协议