Angular-cli Webpack 3rd part css files

Question

I just moved to angular-cli 1.0.0-beta.11-webpack.2
There are so many annoying things but the biggest problem which I`m facing is with external css files (probably I will have the problem with js files too).

In my project is used Angular2 material and the menu component is requiring the overlay.css. When I am including it in index.html:

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

And after ng serve or ng build the overlay css files are missing in the dist folder.

There is as issue on angular-cli github. I did everything exactly how it's mentioned but is still not working.

I crated an assets folder and styles.css file in

• src
• src/app

and my angular-cli.json files look like:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

I would like to ask how can I include an library css files(3rd part css) in my project in a way that I can use the benefits of angular-cli webpack?

Answer 1

Your answer lies within the new styles and scripts config settings available in angular-cli.json. There are two options to solve css injection:

External Styles

Option 1

Just include the path to the css file directly in the styles array like so:

//-- angular-cli.json --//

{
   //... 
 “apps”: [
   {
   //... 
   “styles”: [
     “styles.css”,
     “../node_modules/@angular2-material/core/overlay/overlay.css”
   ],
   “scripts”: [],

     // ...
    }
   }
 ], 

Option 2

You can import overlay.css into src/styles.css file generated by the cli:

/* scr/styles.css */

@import "../node_modules/@angular2-material/core/overlay/overlay.css";

If you use Option 2, make sure to remove reference to overlay.css illustrated in Option 1.

Note: angular-cli.json is a configuration file so you'll need to restart the server when making changes to it.

You can find more angular-cli 1.0.0-beta.11-webpack.2 details here.

External Scripts

Similar to injecting external styles, you can inject external scripts by using the scripts:[] array in angular-cli.json. Any scripts added here will get loaded to the window object. This is particularly handy with plugins that require jQuery to be accessed from the window object. More on this here.

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],