Add CSS from node_modules folder using angular cli

Question

I installed a new library with npm number, so good. Now I want to import css there into my project, obviously, I should not directly refer to the node_modules folder. So, is there an easy way to import this into my project? I am using Angular CLI.

I have an idea, but I'm not sure if this is a good idea. I thought about installing gulp / grunt, and then demanded a style there and brought it as vendor.css to my project. Is it possible?

Answer 1

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

For example: 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">