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 deploy just HTML, CSS webpage to jetty?

    How can I transform dots to line between CSS menu items?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    Getting the title of a picture overlayed onto the picture of a slideshow

    Ember css dosen't work + How to create two stylsheets

    How to resize a canvas without anti-aliasing?

    Table border not showing up

    How to CSS style a radius border

    How to make button look like a link?

    How to grab a CSS syntax with JavaScript?

    How to share js/css/images across Rails applications?

    How to markup an obscure data table layout for screen readers?

    How to apply a CSS class to another element when an object is hovered?

    How can the top DIV from two stacking DIVs affect the other's height

    How to target tablet devices with CSS queries

    How to use CSS absolute position inside a scrollable div element

    CSS how to automatically resize div size?

    How to make a progress bar

    CSS newbie: How to align my link to the right side of the page?

    How to center this flip card example?

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to get inner and outer width to a single element?

    How to create a multi colored circle in html and css

    Added ellipsis for long text but it showing below the text

    How can I avoid using too many classes in CSS?

    How to style a button's font in CSS?

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to restrict the contents in a table data() of a table to a certain limit?

    How to use different CSS opacity in a nested div? [duplicate]