在Visual代码中编译Sass时出错

Question

我正在尝试使用一些工具(如Sass )来跟踪一些关于引导5的YT教程。

这个视频的作者在他的例子开始是测试他的脚本编译Sass代码是否有效。

以下是他作品的截图：

截图1

我试图做同样的事情，但我错了说：

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

这是我的密码：

$primary: #ff0000;

.test-1 {
    color: $primary;
}

截图：截图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";
}

终端截图

我认为我的代码看起来和他的一样，那么问题在哪里呢？自从视频发布后，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