Add the CSS from the node_modules folder using angular cli

孤街醉人 提交于 2019-12-22 06:49:20

问题


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?


回答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">


来源:https://stackoverflow.com/questions/37844334/add-the-css-from-the-node-modules-folder-using-angular-cli

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!