VS Code SCSS自动编译为CSS [英] VS Code SCSS auto compiling to CSS

问题描述

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

I am total beginner in programming and just started to learn HTML/CSS. For coding I started to use VS Code. And I really like it.

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

Only problem so far, what I got, is auto compiling of SCSS to CSS. I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.

还尝试了使用Gulp文件和package.json的解决方案，但也无法使其自动启动.而且必须针对每个项目分别进行.我也尝试过Atom，它具有 sass-autocompile包，并且可以完美运行.因此，对我而言，最简单的方法是使用Atom并忘记.但是我想使用VS Code.

Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately. I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.

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

So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.

推荐答案

您将需要两件事:

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

首先在项目中创建 .vscode 文件夹.

Start by creating .vscode folder in your project.

然后在其中创建具有以下内容的 tasks.json 文件:

Then in it create tasks.json file with the following content:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

现在，打开项目后，您可以通过单击 Ctrl + Shift + B 来运行任务.

Now, after opening the project you can run the task by clicking Ctrl+Shift+B.

使用 Blade Runner 扩展程序-https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

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

Blade Runner will run the task automatically after opening the project :)

这篇关于VS Code SCSS自动编译为CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！