问题
I'm using angular2-webpack-starter to build my project and I want to use bootstrap as well.
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
.
Now, my question is how to import the "real" bootstrap .css
file to my project, so that ng2-bootstrap
can use it.
I tried several ways:
copy the
bootstrap.min.css
file fromnode_modules/bootstrap/dist/css
folder to mysrc/assets/css
folder and add<link href="assets/css/bootstrap.min.css" rel="stylesheet">
to myindex.html
. This way works but my concern is that thebootstrap.min.css
file won't be managed bynpm
any more. I have to manually update it in future.Another attempt is requiring it from my
app.component.ts
likestyles: [ require('./app.style.css'), require('../../node_modules/bootstrap/dist/css/bootstrap.min.css') ],
but it can't be resolved.
- last try is adding
import 'bootstrap';
tovendor.browser.ts
just likeimport '@angular/core';
in it. But it failed either. It seems that thebootstrap
is not a package like@angular2/core
that I can easily import it.
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.
回答1:
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
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";
}
here you can read how it works with css loader
working example with bootstrap
回答2:
import 'bootstrap';
would refer to Bootstrap's JS entry point, not its CSS. Try number 3 with
import 'bootstrap/assets/css/bootstrap.min.css';
instead.
回答3:
maybe you can try like this
import 'bootstrap';
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css';
the first 'import' will import the 'bootstrap' module(maybe refer to bootstrap.js);
the second one may import the css.
and in your webpack.config.js you can use loader
回答4:
You could set it up via Webpack, but this requires installing and adding loaders to your webpack.config.js (css-loaders, style-loaders, url-loaders, file-loaders), then importing the bootstrap.min.css file and bootstrap files in your vendor.ts.
I think this is pretty verbose. Rather than the above, you could just simply install (eg using npm) and add the one line below your scripts (the minified webpack js files) to your index.html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
回答5:
There might be a better way, but I'm using bower
to handle css-related libs (e.g. bootstrap, font-awesome) in my ng2 project.
Set your .bowerrc to save files into: src/assets/lib
(for example) like this:
{
"directory": "src/assets/lib",
}
Then install bower with npm.
npm install bower --save-dev
And then you can install bootstrap with:
bower install bootstrap --save
to add (and if you want to pin the version number) to your bower.json file.
The nice thing about this solution is that bower handles all dependencies for you (for example, it would automatically add jquery to your lib directory)
Then you can manually add your links in your index.html
, as you already did:
<link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>
I added the src/assets/lib
folder to my .gitignore
... and for installing/deploying, I run bower install
.
来源:https://stackoverflow.com/questions/38537355/angular2-webpack-how-to-import-bootstrap-css