使用angular cli從node_modules文件夾添加CSS

Question

我用npm安裝了一個新的庫，到目前為止一直很好。 現在我想將css導入到我的項目中，顯然我不應該直接鏈接到node_modules文件夾。 那么，有一個簡單的做法導入我的項目？ 我正在使用Angular CLI。

我有一個想法，但我不確定這是不是一個好主意 - 我考慮安裝gulp / grunt然后需要那里的樣式並將其作為vendor.css輸出到我的項目中。 它甚至可能嗎？

Answer 1

首先轉到angular-cli-build.js文件，然后在vendorNPMFiles數組中添加一個條目。 這將在構建期間將node_modules文件復制到/ vendor目錄。 現在，您可以在index.html中將您的css引用為/vendor/folder/file.css。

例如：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代碼段

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