How to add css library to project generated with angular-cli@webpack


Tags: css,twitter-bootstrap,angular2,webpack,angular-cli

Problem :

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



Solution :

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": "+"
  }
}

    CSS Howto..

    How to define separate fonts for each font-style - CSS

    How to use font-awesome from server

    Jquery Show Hide with attribute

    How to prevent exceeding the parent's boundary?

    Can someone tell me how to implement this Javascript? HTML CSS

    How to distinct classes in CSS using Javascript

    How to make a HTML list appear without the bullets signs using CSS only?

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    how to create Active State in CSS Navigations

    How do I simulate a hover with a touch in touch enabled browsers?

    How to put my form on top of an image in css/html?

    How to edit a div inside PHP using CSS

    how to create circle that cut off one piece with css

    How browser renders HTML

    How to force Google's custom search to be responsive?

    How to adjust the top of an image and an input in the same line?

    how to apply css to extjs grid emptytext?

    How to force enter key to make a line break inside iframe editor

    How to make elements stay within container?

    how to calculate css rules priority in Javascript?

    How to scale down retina image sprite with css

    How to remove left and right margin on first and last div

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to change CSS in Magento

    How can i execute two effects on .mousenter THIS?

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to crop a rectangular image into a square using CSS?

    How to create a nested vertical menu with horizontally sub-menus using css

    How to make CSS zig-zag borders? [duplicate]

    how can i change the css style on click with table