user15282525
user15282525

Reputation:

Visual Studio Code SASS compiler

I switch from Sublime to VS Code because it anymore PHP and SASS support. I mostly use CSS & SASS & JS & PHP.

I set up a SASS compiler from VS Code documentation. As follows:

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "node-sass style.scss style.css",
      "group": "build",
      "problemMatcher": [
        "$eslint-compact"
      ]
    }
  ]
}

I tested it working properly. But I have 2 problems:

  1. First of all, it focuses on "style.scss" file. I mean, whatever we mentioned in ".json".

Actually what I want is: Focus on all ".scss" files without searching for a name.

  1. When I run an compile with the "a.scss" editor open, it compiles only names in the ".json" file. But there not contain "a.scss"!

Actually what I want is: If I press the "CTRL + SHIFT + B" key and select the corresponding option, the currently active editor is the "a.scss" compilation.

Are there any settings for these?

Note: "command": "node-sass .scss .css", it will give error.

Upvotes: 1

Views: 2327

Answers (1)

Brebber
Brebber

Reputation: 3084

Actual the situation is, that SASS actualized to a new version Dart SASS. There are new rules like @use in it ... so the used compilers needs to be updated.

As I know up to now Node Sass did not.

The better way to use SASS in VS Code is to use an extension.

As we had this several times:
If you are interessted in it you may look here https://stackoverflow.com/a/66207572/9268485


Note: if you decide to use one of the extensions your settings may change. Have a look to the extensions descriptions.

Upvotes: 1

Related Questions