Question

我使用angular2-webpack-starter构建我的项目，我也想使用bootstrap。

我将ng2-bootstrap安装为npm install ng2-bootstrap --save。由于ng2-bootstrap只有一些指令，它需要＆＃34;真正的＆＃34;引导程序的.css文件来设置样式（但它的作者似乎假设我们已经有了它），所以我将引导程序安装为npm install bootstrap --save。

现在，我的问题是如何导入＆＃34;真实＆＃34; .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喜欢

款式：[ 要求（＆＃39; ./ app.style.css＆＃39），要求（＆＃39; ../../ node_modules /引导/ DIST / CSS / bootstrap.min.css＆＃39;） ]，

但无法解决。

上次尝试将import 'bootstrap';添加到vendor.browser.ts，就像import '@angular/core';一样。但它也失败了。似乎bootstrap不是@angular2/core这样的包，我可以轻松导入它。

所以，我的问题归结为如何在webpack中导入/加载bootstrap，以便ng2-bootstrap和项目中的其他组件可以使用它，也可以使用npm升级它

Answer 1

您需要使用 css-loader 通过使用下载 css-loader ，我在我的角度2中做了一些测试，你需要一些装载机

npm install css-loader style-loader url-loader file-loader  --save-dev

然后在你的webpack.config中你可以像这样使用加载器

 loaders: [
    {test: /\.css$/, loader:   ['style-loader', 'css-loader']},
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
    {test: /\.html$/, loader: 'raw',exclude: /node_modules/},
    {test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'},
]

您可以将自举文件加载到要使用它的位置你可以在你的班级使用bootstrap，如

import "bootstrap/dist/css/bootstrap.css";
    @Component({
        selector: "sg-nav",
        template: `
                    <div class="container"></div>`,
    })
    export class NavComponent {
        public name: string = "MR.Js";
    }

here you can read how it works with css loader

working example with bootstrap

Answer 2

import 'bootstrap';会引用Bootstrap的JS入口点，而不是它的CSS。尝试使用

编号3

import 'bootstrap/assets/css/bootstrap.min.css';

代替。

Answer 3

也许你可以这样尝试

import 'bootstrap';
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css';

第一个＆＃39; import＆＃39;将导入＆＃39; bootstrap＆＃39; module（可以参考bootstrap.js）;

第二个可以导入css。

在你的webpack.config.js中你可以使用loader

Answer 4

您可以通过Webpack进行设置，但这需要在webpack.config.js（css-loaders，样式加载器，url-loaders，文件加载器）中安装和添加加载器，然后导入bootstrap.min。您的vendor.ts中的css文件和引导程序文件。

我认为这非常冗长。您可以只安装（例如使用npm）并将脚本下方的一行（缩小的webpack js文件）添加到index.html

，而不是上述内容。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Answer 5

可能有更好的方法，但我在使用bower来处理我的ng2项目中与css相关的库（例如bootstrap，font-awesome）。

设置.bowerrc以将文件保存到：src/assets/lib（例如），如下所示：

{
    "directory": "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。

Angular2 webpack：如何导入bootstrap css

5 个答案: