Angular2的WebPack：如何导入引导CSS

我使用angular2-webpack-starter建立我的项目，我想用引导为好。Angular2的WebPack：如何导入引导CSS

我安装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 /引导/ DIST /css/bootstrap.min.css'） ]，

，但它不能得到解决。

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

所以，我的问题归结为如何导入/负载bootstrap中的WebPack，以便它可以通过ng2-bootstrap，在我的项目的其他部件一起使用，并且还可以通过使用NPM升级。

来源

2016-07-23 Bing Lu

关于数字2.您确定无法直接从node_modules导入css吗？这样做我没有问题。 – Helzgate

@Helzgate我不能。如何导入它，是否像'require（'../../ node_modules/bootstrap/dist/css/bootstrap.min.css'）'？ –

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

import 'bootstrap';将涉及到引导的JS切入点，而不是它的CSS。尝试3号与

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

改为。

来源

2016-07-23 02:15:51 Harangue

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

但如何添加jquery？当我将文件导入到供应商时，我得到'未捕获的错误：引导程序的JavaScript需要jQuery'，但Css工作正常 – kirqe

您需要使用使用CSS-装载机 下载CSS-装载机，我做了一些测试，我的角2和它的工作，你需要一些装载机

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

然后在您的WebPack。配置你可以用装载机这样

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

来源

2016-07-23 04:01:54

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

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

我已经在我的angular2项目中实现了引导程序，并编辑了我的答案以向您展示它的工作原理。尝试一下！ –

也许你可以这样试试

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

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

第二个可能会导入css。

，并在您webpack.config.js可以使用装载机

来源

2016-11-23 08:22:20 Qing

你可以通过的WebPack设置它，但这需要安装并添加装载机您webpack.config.js（CSS-装载机，风格装载机，url加载器，文件加载器），然后导入vendor.ts中的bootstrap.min.css文件和引导文件。

我认为这是相当详细的。而不是上面，你可以只只需安装（例如使用NPM）和下面的脚本一行（缩小的的WebPack js文件）添加到您的index.html

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

来源

2017-01-11 23:25:46 Belfield

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

设置你的.bowerrc将文件保存到：src/assets/lib（例如）是这样的：

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

然后用NPM安装亭子。

npm install bower --save-dev

然后你就可以安装引导用：

bower install bootstrap --save添加（如果要固定版本号）到您的bower.json文件。

关于这个解决方案的好处是，亭子为你处理所有的依赖关系（例如，它会自动添加了jQuery的lib目录）

然后，您可以手动添加你的链接在你index.html，因为你已经做： <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

我加入了src/assets/lib文件夹到我的.gitignore ......以及安装/部署，我跑bower install。

来源

2017-03-07 21:44:39 andzep

Angular2的WebPack：如何导入引导CSS

回答

相关问题