盡管 Vue 是一個非常優秀的前端框架，但是在使用 Vue CLI 的過程中，我們有時候會遇到一些問題。其中，Vue CLI 中的 Sass 編譯器報錯是一個比較常見的問題。

ERROR  in ./src/styles/app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$color-primary".
on line 18 of src/styles/app.scss
...

報錯信息是這樣的，其中 "Undefined variable" 表示某個變量沒有被定義，"$color-primary" 是我們在 Sass 文件中自定義的一個變量名。這時候，Vue CLI 就無法找到這個變量，于是就會報錯。這種情況下，我們需要查看 Sass 文件，找到變量名沒有定義的地方并進行定義。

// 此處 $color-primary 變量沒有被定義
body {
color: $color-primary;
}

如果你的 Sass 文件中存在多個未定義的變量，那么你會收到很多個 "Undefined variable" 的報錯信息。這時候，你需要一一查看這些變量所在的位置，以確定哪些變量需要被定義。

ERROR in ./src/styles/app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$color-primary".
on line 18 of src/styles/app.scss
...
ERROR in ./src/styles/app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$font-size".
on line 19 of src/styles/app.scss
...

對于這種情況，我們可以在 Sass 文件的開頭聲明這些變量：

// 聲明變量
$color-primary: #f00;
$font-size: 14px;
body {
color: $color-primary;
font-size: $font-size;
}

然而，有時候我們的 Sass 文件中可能會有很多變量，而且這些變量可能會相互引用。在這種情況下，我們就需要對 Sass 文件進行模塊化管理。

// app.scss 文件
@use "variables" as var;
body {
color: var.$color-primary;
font-size: var.$font-size;
}
// variables.scss 文件
$color-primary: #f00;
$font-size: 14px;

在 app.scss 中，我們通過 "@use" 引用了 variables.scss 文件，并為其起了一個別名 "var"。這樣，我們就可以通過 "var.$color-primary" 的方式來使用變量了。

綜上所述，Sass 報錯的問題是非常常見的，但是我們可以通過仔細查看報錯信息以及模塊化管理 Sass 文件等方式來解決這個問題。