Using local Bootstrap3 with Angular

问题:

I have created an Angular 2 app using Angular cli.

In the index.html, I am referring to bootstrap 3 on cdn and it works fine

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Now, instead of using the bootstrap from cdn, I would like to use a local copy. So, I installed bootstrap using npm

 npm install bootstrap@3

and then tried to provide a reference in the index.html file, which is inside src (parallel to node_modules)

 <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

however, this does not work and I see the below in browser console (when I load index.html)

Can someone please advice how to load bootstrap locally?

PS: I don't want to use Bootstrap4 as it is still in alpha

回答1:

In your .angular-cli.json file are scripts & styles properties which accept an array of string (your relative path to your npm package)

This is where you should reference your local javascript and css/scss/less files.

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Add your scripts here, when running ng serve these files will be created in your index.html file.

The Angular-CLI is a great choice to build apps with and it's only getting better.

回答2:

You should copy css file to your local folder and allow to load it

<link href="/css/bootstrap.min.css" rel="stylesheet"> 

回答3:

Why not just load it with the css loader and bundle it in like anything else?

I have four entry point files that do all my bundling, one of them is called css-chunk.js. I require all my css files in there via the webpack css loader.

Line from css-chunk.js:

require('!style-loader!css-loader!bootstrap/dist/css/bootstrap.css');

Loader from webpack.config:

loaders: [
                ...,
                {
                    test: /\.css$/,
                    loaders: ['to-string-loader', 'css-loader']
                },
            ],

Everything just gets bundled up, and you just have to include the bundles CSS file in your index page:

<script src="css.bundle.js"></script>

Works great, I have a few apps deployed this way.

回答4:

Remove the .. from the href attribute value:

href="/node_modules/bootstrap/dist/css/bootstrap.min.css"  

Another suggestion is to take a look at the /dist folder if you have when webpack bundles up js and css with it's loaders.

If you see a css folder then you just have to:

href="/css/bootstrap.min.css"  

Or if it is at root level then you just put the file's name only:

href="/bootstrap.min.css"