Bootstrap 4无法与Angular CLI一起使用

Question

I've installed Bootstrap 4 using node into an Angular 2 project by following this guide:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Followed the instructions to the letter, but now when I try and run the application using ng serve I get compile errors.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:320:18)
    at Function.select (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:438:37)
    at D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:207:41
    at Array.forEach (native)
    at browserslist (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at processing.Promise.then._this2.processed (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at LazyResult.async (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:228:27)
 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

My apps section of my .angular-cli.json file (as far as I can see) seems ok and is the only file I changed since installing Bootstrap 4 and the physical bootstrap files are in the node modules folder. My node_modules folder is in the root of the project on the same level as the src folder just as the cli sets it up by default.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Have I missed a step somewhere? Or maybe the guide I'm ready is out of date, I'm just not sure, but this feels like it should be really simple and should just work?

Answer 1

Have you seen this bug report ?

Basically, two main solutions I get from this:

1. Try with other minor versions of Bootstrap
2. Use Sass and import Bootstrap Sass files instead of adding Bootstrap minified CSS in angular-cli.json

Personally I copy the entire Sass code from Bootstrap Github tags into my project. This gives me more flexibility.