-1

I just upgraded my CLI project to Angular 5/ CLI 1.5 and I'm getting errors from Bootstrap 4 no matter what I do. This is the main error:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
  @return mix($color-base, $color, $level * $theme-color-interval);
         ^
      Argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color

My Bootstrap install is basically an import of things I want via scss, not the whole thing.

The import that had been working:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/utilities";

I've also tried importing the entire thing to debug the issue but that came up with the same error:

@import "~bootstrap/scss/bootstrap";

I've read the old threads about this issue saying it was fixed a long time ago but I can't get around it. Has anyone had this problem and figured it out?

Workflow:

  • Delete node_modules and package-lock.json
  • npm install
  • ng serve (I'm using the global CLI, not local)

Node Version: 8.9.0

NPM Version: 5.5.1

Here's my setup:

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.4",
    "rxjs": "^5.5.2",
    "socket.io-client": "^2.0.4",
    "zone.js": "^0.8.18"
  },

"devDependencies": {
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/lodash": "^4.14.77",
    "@types/node": "~8.0.5",
    "codelyzer": "~4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.3.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
austinthedeveloper
  • 2,401
  • 19
  • 27

3 Answers3

1

Turns out I answered my own question by saying I didn't use the darken mixin. I had a call in a variables file that was included before Bootstrap. I moved it down and everything worked again.

The strange thing was that this code hadn't been changed in months and worked fine. I'm guessing the compiler is pickier now.

austinthedeveloper
  • 2,401
  • 19
  • 27
-1

Make sure node is updated to the latest version along, after that run: npm update -g to update all packages, or npm update [package-name]

LordGrim
  • 70
  • 5
-2

Include Bootstrap

Bootstrap is a popular CSS framework which can be used within an Angular project. This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap.

Installing Bootstrap

With the new project created and ready you will next need to install bootstrap to your project as a dependency. Using the --save option the dependency will be saved in package.json

version 3.x

npm install bootstrap --save

version 4.x

npm install bootstrap@next --save

Configuring Project It should look like the following when you are done:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
],

learn more about it

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-bootstrap.md

core114
  • 5,155
  • 16
  • 92
  • 189