VS Code SCSS自动编译为CSS

Question

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

到目前为止唯一的问题是,我得到的是自动编译SCSS到CSS.我已经搜索并阅读了许多解决方案,我发现的最好的是VS Code终端中的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

你需要两件事:

• 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将在打开项目后自动运行任务:)