Angular2 webpack:如何导入bootstrap css

Question

我正在使用angular2-webpack-starter来构建我的项目,我也想使用bootstrap.

我安装ng2-bootstrap作为npm install ng2-bootstrap --save.由于ng2-bootstrap只有一些指令,它需要.css引导程序的"真实" 文件来设置它(但它的作者似乎假设我们已经拥有它),所以我安装bootstrap as npm install bootstrap --save.

现在,我的问题是如何将"真正的"引导程序.css文件导入到我的项目中,以便ng2-bootstrap可以使用它.

我试过几种方法:

1. 将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.我将来必须手动更新它.

2. 另一种尝试是要求我app.component.ts这样做

   styles:[require('./ app.style.css'),require('../../ node_modules/bootstrap/dist/css/bootstrap.min.css')],

但它无法解决.

3. 最后一次尝试是加入import 'bootstrap';到vendor.browser.ts像刚才import '@angular/core';在里面.但它也失败了.似乎这bootstrap不是一个像@angular2/core我可以轻松导入它的包.

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

Answer 1

你需要使用css-loader 下载css-loader,我在我的角度2做了一些测试,它工作你需要一些装载机

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

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

 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文件,你可以在你的类中使用bootstrap

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

在这里你可以阅读它如何与css加载器一起工作

使用bootstrap的工作示例

Answer 2

import 'bootstrap';将引用 Bootstrap 的 JS 入口点，而不是其 CSS。尝试使用 3 号

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

反而。