css - VS Code SCSS 自动编译成 CSS

Question

我完全是编程初学者，刚开始学习 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)。或者也许有人可以用其他方式向我解释如何解决这个问题。

Answer 1

你需要两件事:

• tasks.json 文件
• Blade Runner 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

Blade Runner 会在打开元素后自动运行任务:)