一个没有附加扩展的解决方案

Question

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

到目前为止，只有问题，我得到的是自动编译SCSS到CSS。我搜索并阅读了许多解决方案，我发现的最好的是VS Code终端中的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 file
适用于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

Answer 3

一个没有附加扩展的解决方案

随心所欲

假设您在全局范围内安装了 sass，例如：

npm install -g sass

打开文件夹，在.vscode下创建一个task.json文件

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "label": "Watch Sass",
        "type": "shell",
        "command": "sass --watch src/style.sass styles/style.css --style=compressed",
        "problemMatcher": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "runOptions": {
            "runOn": "folderOpen"
        }
    }]
}

使用 node-sass

将上面的 sass 替换为 node-sass。

在这两种情况下，请确保源/目标文件名、位置和扩展名正确（在我的情况下为 src/style.scss 和 style/style.css）

或者复制 .vscode-workspace 中的部分以避免混乱。确保根据您的个人需要更改 sass 源文件和目标文件。

现在允许自动运行任务

Ctrl+Alt+P
选择管理自动任务和
选择允许文件夹中的自动任务和
关闭并重新打开您的文件夹（或工作区）

sass 编译器将被调用并开始以令人放心的方式监视您的所有编辑：

Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

或编译失败时出现错误消息。：

Error: semicolons aren't allowed in the indented syntax.
  ╷
7 │     padding: 0;
  │               ^
  ╵
  css\src\_base.sass 7:12  @import
  css\src\style.sass 1:9   root stylesheet

Answer 4

Visual Studio Code的轻松编译或实时SASS编译器扩展。 Live SASS编译器可以重新编译所有源，而Easy Compile仅编译一个文件。

Easy Compile在保存文件时进行编译，而Live SASS Compiler可以使您观看代码并在看到更改时进行编译。您必须每次都手动启动它，而Easy Compile则是开箱即用的。

VS Code SCSS自动编译为CSS

4 个答案:

一个没有附加扩展的解决方案

随心所欲

使用 node-sass