Bootstrap & angular 8. _root.scss 中未定义的变量答案

【问题标题】：Bootstrap & angular 8. undefined variable in _root.scssBootstrap & angular 8. _root.scss 中未定义的变量
【发布时间】：2019-10-16 03:03:53
【问题描述】：

我今天尝试将我的项目更新到 Angular 8.0.0，但我遇到了引导程序问题，我找不到解决方案。

我使用引导程序 4.3.1

当我执行ng serve 时，我收到此错误：

ERROR in ./node_modules/bootstrap/scss/bootstrap.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./node_modules/bootstrap/scss/bootstrap.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  @each $color, $value in $colors {
                         ^
      Undefined variable.
  ╷
3 │   @each $color, $value in $colors {
  │                           ^^^^^^^
  ╵
  node_modules/bootstrap/scss/_root.scss 3:27  @import
  stdin 11:9                                   root stylesheet
      in ./node_modules/bootstrap/scss/_root.scss (line 3, column 27)

在我的 angular.json 中，我有这个（我只包含了与 scss 相关的部分）：

  "schematics": {
    "@schematics/angular:component": {
      "style": "sass"
    }
  },
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.json"
        ],
        "styles": [
          "./node_modules/bootstrap/scss/bootstrap.scss",
          "./node_modules/c3/c3.css",
          "./node_modules/@fortawesome/fontawesome-free/css/all.css",
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./src/styles/styles.scss"
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/styles"
          ]
        },
        "scripts": [],
        "es5BrowserSupport": true
      },

根据我对错误的理解，这是由于全局 scss 变量不可用，在"./node_modules/bootstrap/scss/bootstrap.scss" 中，它看起来像这样：

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "many_other_stuff"

$colors 变量在"variables" 中定义，因此它应该在"root" 中可用。

知道我在这里做错了什么吗？

【问题讨论】：

标签： sass bootstrap-4 angular-cli angular8

【解决方案1】：

应该是 scss 而不是 sass ：

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },

谢谢

【讨论】：

谢谢，我试过了，但没有任何改变

【解决方案2】：

请查看此 Stackblitz 并比较您的 package.json、angular.json（和其他相关文件），看看您是否错过了安装某些依赖项。这个 Stackblitz 有 angular 8.0.0 并使用 bootstrap 4.3.1

https://stackblitz.com/edit/angular-gkx8zp?file=package.json https://stackblitz.com/edit/angular-gkx8zp?file=angular.json

你需要在 package.json 中添加这些来安装 bootstrap 并使用 angular 8.0 的 scss 版本

"bootstrap": "4.3.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7",
"node-sass": "4.7.2",

【讨论】：

我有这些依赖项，但是查看您的 Stackblitz，我发现了一个我没有解决问题的依赖项：node-sass。我安装了它，它现在可以工作了。编辑您的答案以添加此内容，我会接受它
我本可以在你之前提供的这个问题上赢得赏金:(。很遗憾你没有早点看到这个答案
更新了我的答案，请检查。
嘿，没问题 :) 乐于助人