1

After creating new project and upgrading it to webpack version I wanted to add bootstrap's CSS.

I tried method descibed in docs [1] but it doesn't seem to work.

I cannot use the cdn version because my users may have to work without acces to external networks.

[1] https://github.com/angular/angular-cli#global-library-installation

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

.

$ ng --version
angular-cli: 1.0.0-beta.11-webpack.2
node: 5.4.1
os: linux x64

or maybe I just don't understand what should happen? after ng build in dist dir there is no CSS file and there is nothing added to index.html

dmnk_89
  • 499
  • 5
  • 9

3 Answers3

1

I think that you have to add ../ front of the node_modules, because node_modules folder is one step up in the directory tree. Like this: "../node_modules/bootstrap/dist/css/bootstrap.css"

Tero Mäntylä
  • 36
  • 5
  • I should include that in question. I have tried both versions (with and without `../`) with same effects (well... no efect). – dmnk_89 Aug 23 '16 at 10:31
  • Maybe you could use [ng2-bootsrap](https://github.com/valor-software/ng2-bootstrap) like [here](http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project) – Tero Mäntylä Aug 23 '16 at 11:56
  • ng2-bootstrap adds only js and no CSS so installing it doesn't help. And method of providing CSS provided in quistion doesn't work with webpack – dmnk_89 Aug 23 '16 at 12:54
1

If you upgrade to 1.0.0-beta.11-webpack.3 or higher, you can use the apps[0].styles property of angular-cli.json to list external stylesheets for import. With this you don't have to add anything to index.html.

To upgrade from 1.0.0-beta.11-webpack.2 to 1.0.0-beta.11-webpack.3, run:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.11-webpack.3

Note: you may need to upgrade to Node.js 6 if you get SyntaxError: Unexpected token ... errors on running ng version. See https://github.com/angular/angular-cli/issues/1883 for details.

If you generate a new project and install Bootstrap, your angular-cli.json should look something like this:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}
Mark Leong
  • 1,528
  • 13
  • 14
0

All your css files from apps[0].styles property of angular-cli.json during ng build are compiled into styles.bundle.js and this file is included in index.html. If you check this file you can found there all styles. So it works as intended.

binaryAdam
  • 1
  • 1
  • 1