Error when compiling Sass in Visual Studio Code

byMR

January 7, 2022

I’m trying to follow some YT tutorial about Bootstrap 5 with the use of some tools like Sass.

Author of this video in his example at the beginning is testing if his script for compiling Sass code is working.

Here’s the screenshot of his work:

screenshot 1

I tried to do the same thing and I got an error saying:

Error: Sass variables aren't allowed in plain CSS.

Here’s my code:

$primary: #ff0000;

.test-1 {
    color: $primary;
}

And the screenshot: screenshot 2

This showed up after compiling my script:

/* Error: Sass variables aren't allowed in plain CSS.
 *   ,
 * 1 | $primary: #ff0000;
 *   | ^^^^^^^^
 *   '
 *   scss/style.css 1:1  root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Sass variables aren't allowed in plain CSS.\a   \2577 \a 1 \2502  $primary: #ff0000;\a   \2502  ^^^^^^^^\a   \2575 \a   scss/style.css 1:1  root stylesheet";
}

Screenshot of terminal

I think that my code looks the same as his, so where is the problem? Had some rules of Sass had changed since the video was posted?

Here is my info from package.json:

    "sass": "^1.45.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "autoprefixer": "^10.4.1",
    "bootstrap": "^5.1.3",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0"

And his:

    "sass": "^1.32.12"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "autoprefixer": "^10.2.5",
    "bootstrap": "^5.0.0",
    "postcss-cli": "^8.3.1"