在 Visual Studio Code 中编译 Sass 时出错答案

【问题标题】：Error when compiling Sass in Visual Studio Code在 Visual Studio Code 中编译 Sass 时出错
【发布时间】：2022-01-07 23:10:15
【问题描述】：

我正在尝试使用诸如 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   \2577 \a 1 \2502  $primary: #ff0000;\a   \2502  ^^^^^^^^\a   \2575 \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"

【问题讨论】：

标签： visual-studio-code sass bootstrap-5

【解决方案1】：

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

【讨论】：

谢谢你-就是这样
不客气 :)