Add the CSS from the node_modules folder using angular cli

Question

I've installed a new library with npm, so far so good. Now I want to import the css in there to my project, obviously I shouldn't link directly to the node_modules folder. So, is there a simple to do import this to my project? I'm using Angular CLI.

I have an idea, but I'm not sure if it's a good idea - I thought about installing gulp/grunt and then require the style there and output it as vendor.css into my project. Is it even possible?

Answer 1

First go to your angular-cli-build.js file and add an entry in the vendorNPMFiles array. This will copy your node_modules files to the /vendor directory during the build. Now you can reference your css in your index.html as /vendor/folder/file.css.

Eg: angular-cli-build.js

/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',

      'bootstrap/dist/**/*.*',
      'lodash/lodash.min.js'
    ]
  });
};

index.html snippet

<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">