在 Visual Studio 代码中编译 Sass 时出错

Question

我正在尝试使用 Sass.

等工具来遵循一些 YT tutorial about Bootstrap 5

该视频的作者在开头的示例中正在测试他用于编译 Sass 代码的脚本是否正常工作。

这是他的作品截图：

screenshot 1

我尝试做同样的事情，但收到一条错误消息：

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

这是我的代码：

$primary: #ff0000;

.test-1 {
    color: $primary;
}

以及截图：screenshot 2

这在编译我的脚本后出现：

/* 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   77 \a 1 02  $primary: #ff0000;\a   02  ^^^^^^^^\a   75 \a   scss/style.css 1:1  root stylesheet";
}

Screenshot of terminal

我觉得我的代码和他的一样，请问是哪里出了问题？自视频发布以来 Sass 的一些规则是否发生了变化？

这是我来自 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"

还有他的：

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

Answer 1

你的文件扩展名是什么？应该是.scss。 => my-style.scss

在 Visual Studio 代码中编译 Sass 时出错

Error when compiling Sass in Visual Studio Code

sass

visual-studio-code

bootstrap-5