Angular2 webpack：如何导入引导 css

Posted 2023-03-13

【中文标题】Angular2 webpack：如何导入引导 css

【英文标题】：Angular2 webpack: how to import bootstrap css

【发布时间】：2016-11-27 00:01:58

【问题描述】：

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

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

现在，我的问题是如何将“真正的”引导程序.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 喜欢它

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

但无法解决。

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

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

【问题讨论】：

关于2号，你确定不能直接从node_modules导入css吗？我这样做没有问题。

@Helzgate 我不能。怎么导入，是不是像require('../../node_modules/bootstrap/dist/css/bootstrap.min.css')？

我不知道，它只是工作，我在我的应用程序中的很多地方都以这种方式使用了一段时间（是的，我说的是 node_modules）。你确定你有足够的省略号吗？我会尝试添加更多 ../ 并尝试，或减去一些。也要注意错误，也许它正在加载 css 但您遇到了其他错误。

这就是我要做的 --> git clone --depth 1 github.com/AngularClass/angular2-webpack-starter.git

【参考方案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

【讨论】：

你能告诉如何在 angular-cli.i 中使用这个 css 加载器吗？我无法在 node_modules 中引用我的引导程序

这个解决方案和我的一号解决方案类似。 .css 已加载，但它是从 src 文件夹而不是从 node_modules/bootstrap 加载的。所以，如果我在package.json 和npm install 中更新版本，css 文件将不会更新。

我已经在我的 angular2 项目中实现了引导程序并编辑了我的答案以向您展示它是如何工作的。试试看！

【参考方案2】：

import 'bootstrap'; 指的是 Bootstrap 的 JS 入口点，而不是它的 CSS。用

试试数字 3

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

改为。

【讨论】：

它不起作用。我得到ERROR in ./~/bootstrap/dist/css/bootstrap.min.css。 css 文件位于node_modules/bootstrap/dist/css/bootstrap.min.css 中，但似乎我们无法在.ts 文件中导入.css 文件。无法解决。

但是如何添加jquery？当我将文件导入供应商时，我得到 Uncaught Error: Bootstrap's javascript requires jQuery 但 Css 工作得很好

【参考方案3】：

也许你可以这样尝试

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

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

第二个可以导入css。

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

【参考方案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">

【参考方案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。