Angular2 Webpack:如何导入Bootstrap CSS [英] Angular2 webpack: how to import bootstrap css

问题描述

我正在使用 angular2-webpack-starter 构建我的项目，我想要也要使用引导程序.

I'm using angular2-webpack-starter to build my project and I want to use bootstrap as well.

我将 ng2-bootstrap 安装为npm install ng2-bootstrap --save.由于ng2-bootstrap仅具有一些指令，并且需要bootstrap的真正的" .css文件来设置其样式(但是作者似乎认为我们已经拥有它)，因此我将bootstrap安装为npm install bootstrap --save.

I install ng2-bootstrap as npm install ng2-bootstrap --save. Since the ng2-bootstrap only has some directives and it requires the "real" .css file of bootstrap to style it (but its author seems to assume we have had it), so I install bootstrap as npm install bootstrap --save.

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

Now, my question is how to import the "real" bootstrap .css file to my project, so that ng2-bootstrap can use it.

我尝试了几种方法:

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进行管理.我以后必须手动对其进行更新.

1. copy the bootstrap.min.css file from node_modules/bootstrap/dist/css folder to my src/assets/css folder and add <link href="assets/css/bootstrap.min.css" rel="stylesheet"> to my index.html. This way works but my concern is that the bootstrap.min.css file won't be managed by npm any more. I have to manually update it in future.

另一种尝试是像

样式:[ require('./app.style.css')， require('../../node_modules/bootstrap/dist/css/bootstrap.min.css') ]

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

但无法解决.

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

1. last try is adding import 'bootstrap'; to vendor.browser.ts just like import '@angular/core'; in it. But it failed either. It seems that the bootstrap is not a package like @angular2/core that I can easily import it.

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

So, my question comes down to how to import/load bootstrap in webpack, so that it can be used by ng2-bootstrap and other components in my project and it can also be upgraded by using npm.

推荐答案

您需要使用 css-loader 通过使用下载 css-loader ，我在我的angular 2中做了一些测试，它的工作原理是您需要一些装载器

you need to use css-loader download css-loader by using, i did some test in my angular 2 and it work you need some loaders

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

然后在webpack.config中，您可以像这样使用加载程序

then in your webpack.config you can use loader like this

 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'},
]

您可以将引导文件加载到您要在其中使用的位置 您可以在类中使用引导程序，例如

you can load your bootstrap file where you are going to use it with and you can use bootstrap in your class like

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

在这里您可以了解它如何与CSS加载程序一起使用

使用引导程序的工作示例

这篇关于Angular2 Webpack:如何导入Bootstrap CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！