Angular2 webpack：如何导入引导 css

Question

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

我将ng2-bootstrap 安装为npm install ng2-bootstrap --save。由于ng2-bootstrap 只有一些指令，并且它需要引导程序的“真实”.css 文件来设置它的样式（但它的作者似乎假设我们已经拥有它），所以我将引导程序安装为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 喜欢它

   样式：[ 要求（'./app.style.css'）， 要求（'../../node_modules/bootstrap/dist/css/bootstrap.min.css'） ],

但无法解决。

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

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

Answer 1

你需要使用 css-loader 通过使用下载 css-loader，我在我的 Angular 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'},
]

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

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';

第一个'import'会导入'bootstrap'模块（可能参考bootstrap.js）；

第二个可以导入css。

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

Answer 4

您可以通过 Webpack 进行设置，但这需要安装加载器并将其添加到您的 webpack.config.js（css-loaders、style-loaders、url-loaders、file-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

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

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

{
    "directory": "src/assets/lib",
}

然后用 npm 安装 bower。

npm install bower --save-dev

然后你可以安装引导程序：

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。