VS Code SCSS自动编译为CSS

Question

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

到目前为止唯一的问题是，我得到的是自动编译SCSS到CSS。我搜索并阅读了许多解决方案，我发现的最好的是VS代码终端中的ruby + sass +代码sass --watch .在创建新的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文件
• 适用于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

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

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