使用angular cli从node_modules文件夹添加CSS [英] Add the CSS from the node_modules folder using angular cli

问题描述

到目前为止，我已经用npm安装了一个新库.现在，我要将其中的css导入到我的项目中，显然我不应该直接链接到node_modules文件夹.那么，有没有简单的方法可以将其导入到我的项目中?我正在使用Angular CLI.

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.

我有个主意，但是我不确定这是否是个好主意-我考虑过要安装gulp/grunt，然后在那儿要求样式并将其作为vendor.css输出到我的项目中.甚至有可能吗?

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?

推荐答案

首先转到您的angular-cli-build.js文件，然后在vendorNPMFiles数组中添加一个条目.这将在构建期间将您的node_modules文件复制到/vendor目录.现在，您可以在index.html中将您的CSS引用为/vendor/folder/file.css.

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.

例如:angular-cli-build.js

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代码段

index.html snippet

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

这篇关于使用angular cli从node_modules文件夹添加CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！