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升级。
import 'bootstrap';
将涉及到引导的JS切入点,而不是它的CSS。尝试3号与
import 'bootstrap/assets/css/bootstrap.min.css';
改为。
它不起作用。我在./〜/ 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";
}
你能告诉我如何使用这个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可以使用装载机
你可以通过的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">
有可能是一个更好的办法,但我使用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
。
关于数字2.您确定无法直接从node_modules导入css吗?这样做我没有问题。 – Helzgate
@Helzgate我不能。如何导入它,是否像'require('../../ node_modules/bootstrap/dist/css/bootstrap.min.css')'? –
我不知道,它只是工作,我一直在我的应用程序在很多地方以这种方式使用它一段时间(是的,我正在谈论从node_modules)。你确定你有足够的elipses?我会尝试添加更多../并尝试,或减去一些。也要注意错误,也许它正在加载CSS,但是你遇到了一些其他的错误。 – Helzgate