我正在使用angular2-webpack-starter构建我的项目,我也想使用bootstrap .
我将ng2-bootstrap安装为 npm install ng2-bootstrap --save
. 由于 ng2-bootstrap
只有一些指令,它需要引导程序的"real" .css
文件来设置它(但它的作者似乎假设我们已经有了它),所以我安装bootstrap为 npm install bootstrap --save
.
现在,我的问题是如何将"real" bootstrap .css
文件导入到我的项目中,以便 ng2-bootstrap
可以使用它 .
我试过几种方法:
-
将
bootstrap.min.css
文件从node_modules/bootstrap/dist/css
文件夹复制到我的src/assets/css
文件夹,并将<link href="assets/css/bootstrap.min.css" rel="stylesheet">
添加到我的index.html
. 这种方式有效,但我担心bootstrap.min.css
文件将不再由npm
管理 . 我将来必须手动更新它 . -
另一次尝试需要我的
app.component.ts
之类的
styles:[require(' . / app.style.css'),require('../../ node_modules / bootstrap / dist / css / bootstrap.min.css')],
但它无法解决 .
- 最后一次尝试将
import 'bootstrap';
添加到vendor.browser.ts
就像import '@angular/core';
一样 . 但它也失败了 . 似乎bootstrap
不是像_2886520这样的包,我可以轻松导入它 .
所以,我的问题归结为如何在webpack中导入/加载 bootstrap
,以便它可以被我的项目中的 ng2-bootstrap
和其他组件使用,也可以使用npm进行升级 .
5 回答
你需要使用 css-loader 下载 css-loader 使用,我在我的角度2做了一些测试,它工作你需要一些装载机
然后在你的webpack.config中你可以像这样使用loader
你可以加载你将要使用它的bootstrap文件,你可以在你的类中使用bootstrap
here you can read how it works with css loader
working example with bootstrap
import 'bootstrap';
会引用Bootstrap的JS入口点,而不是它的CSS . 尝试使用3号代替 .
也许你可以这样试试
第一个'import'将导入'bootstrap'模块(可能引用bootstrap.js);
第二个可能导入CSS .
在你的webpack.config.js中你可以使用loader
您可以通过Webpack进行设置,但这需要在webpack.config.js(css-loaders,样式加载器,url-loaders,文件加载器)中安装和添加加载器,然后导入bootstrap.min.css文件和vendor.ts中的bootstrap文件 .
我觉得这很冗长 . 而不是上面的,你可以简单地安装(例如使用npm)并将脚本下面的一行(缩小的webpack js文件)添加到index.html
可能有更好的方法,但我正在使用
bower
来处理我的ng2项目中与css相关的库(例如bootstrap,font-awesome) .设置.bowerrc将文件保存到:
src/assets/lib
(例如)像这样:然后用npm安装凉亭 .
npm install bower --save-dev
然后你可以安装bootstrap:
bower install bootstrap --save
添加(如果您想将版本号固定)到您的bower.json文件 .这个解决方案的好处是,bower为您处理所有依赖项(例如,它会自动将jquery添加到您的lib目录)
然后,您可以手动添加
index.html
中的链接,如您所做的那样:<link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>
我将
src/assets/lib
文件夹添加到我的.gitignore
...并且为了安装/部署,我运行bower install
.