Начальная загрузка и угловая 8. неопределенная переменная в _root.scss - PullRequest
Новая
       39

Начальная загрузка и угловая 8. неопределенная переменная в _root.scss

3 голосов
/ 30 мая 2019

Я попытался обновить свой проект до 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".

Есть идеи, что я тут не так делаю?

Ответы [ 2 ]

2 голосов
/ 14 июня 2019

Это должен быть scss вместо sass: 

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

Спасибо

1 голос
/ 12 июня 2019

Пожалуйста, посмотрите этот Stackblitz и сравните ваш package.json, angular.json (и другие соответствующие файлы), чтобы увидеть, пропустили ли вы установку какой-либо зависимости.Этот Stackblitz имеет угловой 8.0.0 и использует загрузчик 4.3.1

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

Вам необходимо добавить их в package.json для установки начальной загрузки и использования scss versionofэто с угловой 8.0 

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