使用 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屋!