How to include Twitter Bootstrap 3 using webpack #696

shahzad-0 · 2016-06-15T15:36:39Z

Hi,

I have taken a look at #214 & #215, but these don't really explain how to setup bootstrap 3. I also tried going on the slack chat page, but that seems to be broken.

I have installed the npm packages for jquery & bootstrap, and then added imports into vendor.ts, but I still don't have any bootstrap styling showing up on the browser.

...
import 'jquery/dist/jquery.js'

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
...

I also tried adding another entry within webpack.common.js, but that didn't help either.

Any help would be much appreciated, thanks.

The text was updated successfully, but these errors were encountered:

MurhafSousli · 2016-06-16T08:39:22Z

Maybe you are looking for ng2-bootstrap

Generally to load jQuery in your project do npm install jquery --save and typings install jquery
and then add this line in vendor.ts

import 'jquery';

That's it, all external libraries works the same way, import 'library-name';

in some cases when the library doesn't include index.js in their root directory, then you will need to locate it the way you are doing like import "library-name/dist/library-name".

shahzad-0 · 2016-06-16T08:51:19Z

@MurhafSousli Thanks for the response.

I have looked at ng-bootstrap, and it seems great. However, I have a restriction which requires me to use standard bootstrap 3.

As for jQuery, I have added it into the project using typings and also changed my import to the one you have suggested. But, I don't really need jQuery by itself, I just need to so that I can get Bootstrap 3 running. Which, unfortunately, I haven't been managed to load up.

MurhafSousli · 2016-06-16T10:03:35Z

I just tested it now.
Step 1: Install both jquery and bootstrap

npm install jquery bootstrap --save

Step 2: Import them in vendor.ts:

import 'jquery';
import 'bootstrap/dist/js/bootstrap';

Step 3: Go to wepback.common.js in config directory and add this inside plugin section:

plugins:[
    .....
    ..... ,
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
]

This will let bootstrap to find jquery

Step 4: Import bootstrap css, you can do that by importing it in the head of your index.html or from your app.css, I used the second way.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

The reason I didn't import it from node_modules folder that It won't load the fonts, however you can fix this by overriding the fonts imports in app.css

After you do these steps you will probably get this error:

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
This is because the current jquery version installed is 3.0.0, so go back and install a previous version of jquery

shahzad-0 · 2016-06-16T10:13:33Z

@MurhafSousli Thank you for the help.

gearlles · 2016-06-22T13:39:29Z

@MurhafSousli Is there any way to include bootstrap css without using @import cdn? From step 1 we have bootstrap css in /node_modules, I'd rather use it than making a request. The font problem I will try to solve later.

I tried using relative path:

@import url('/node_modules/bootstrap/dist/css/bootstrap.css');

but it gives me HTTP 404:

GET http://localhost:3000/node_modules/bootstrap/dist/css/bootstrap.css  browser_adapter.js:170

shahzad-0 · 2016-06-22T13:44:42Z

@gearlles You are getting the 404 because node_modules doesn't get added to your dist folder. If you want to use the bootstrap.css file, then you can put it under src/assets/css/ and in your css file you should be able to import it using @import url('/assets/css/bootstrap.css').

gearlles · 2016-06-22T14:00:51Z

@shahzad-0 Thanks. But I think it's not a good idea, it's harder to maintain. Suppose I want to upgrade bootstrap version in the future, not everyone in the project would know that apart from packages.json, /assets/css/bootstrap.css should be modified.

Note that this problem exists in the @MurhafSousli solution. Both packages.json and app.css should be modified.

shahzad-0 · 2016-06-22T14:05:40Z

@gearlles Yes, I agree. That's what I was trying to find out when I created the issue. But since importing the css into vendors.js didn't work, I'm not sure what else can be done.

Please post a solution here when you find one.

gearlles · 2016-06-22T14:15:23Z

@shahzad-0 I will. Would you mind reopening your issue or I should create another issue to discuss this?

gearlles · 2016-06-22T15:46:03Z

@shahzad-0 I don't know your requirements, but I got Bootstrap 3 (sass) working based on #215. Please check if it works for you too.

1. Install dependencies

npm install jquery bootstrap-sass bootstrap-loader css-loader node-sass resolve-url-loader sass-loader style-loader url-loader --save-dev

Note: I'm not sure if all dependencies are indeed necessary. I used dependencies from #215 and added others to get it working for Bootstrap 3.

2. Configure Webpack

Edit webpack.common.js to add new loaders and plugin.

To add loaders, edit `loaders:[]`

      { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
      { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }

To add the jQuery plugin, edit `plugins: []`

    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })

3. Import Bootstrap

Edit vendor.browser.ts and add:

import 'jquery';
import 'bootstrap-loader';

Bootstrap should now work. Reload your application.

shahzad-0 · 2016-06-22T16:09:49Z

@gearlles I have a limitation of using less, so I don't think I can use the bootstrap-loader. But I #215 will probably resolve this issue for most people, who are able to use sass. And anyone who can't use the bootstrap-loader, the solution provided by @MurhafSousli should be enough (although your point of having to update the package.json and app.css files for updating bootstrap should be kept in mind).

MurhafSousli · 2016-06-23T00:29:16Z

@gearlles to import the style from node_modules

from component:

@Component({
  selector: 'app',
  template: require('./app.html'),
  styles: [
              require('bootstrap/dist/css/bootstrap'),
              require('app.scss')
  ],

or from stylesheet app.scss:

@import url('bootstrap/dist/css/bootstrap');

To get bootstrap glyphicons when importing it locally, the only workaround I found is to copy the fonts folder into assets and then override the fonts from your stylesheet app.scss, something like this:

@font-face {
  font-family: "some-font";
  src: url("../assets/bootstrap/fonts/glyphicons-halflings-regular.eot");
  src: url(".../assets/bootstrap/fonts/glyphicons-halflings-regular.eot#iefix") format("embedded-opentype"),
  url(".../assets/bootstrap/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url(".../assets/bootstrap/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url(".../assets/bootstrap/fonts/glyphicons-halflings-regular.svg#rio") format("svg");
  font-weight: normal;
  font-style: normal;
}

harunurhan · 2016-06-27T08:48:39Z

@gearlles

I did as you described, but still have Module parse error for those font files. How are you doing the import in your own scss file exactly?

gearlles · 2016-06-27T13:49:32Z

@harunurhan I didn't import anything in my .scss. The second loader { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' } should handle font files. Perhaps the regex is wrong?

Please try { test: /\.(woff|woff2|ttf|eot|svg)$/, loader: 'url?limit=10000' }

harunurhan · 2016-06-27T15:20:41Z

@gearlles that doesn't work neither. I also tried using other loaders like file-loader but no luck 😢

Stack trace:
https://gist.github.com/harunurhan/8eefd35c9f4e7390b38625e9a161b2ae

phiphou · 2016-06-27T15:26:43Z

file-loader solution should work.

Try this :

{
  test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=fonts/[name].[ext]"
}

harunurhan · 2016-06-27T15:32:18Z

@phiphou
Thanks for help but still same errors!

phiphou · 2016-06-27T18:23:59Z

@harunurhan Did you correctly set up the sassLoader?

Here is what I use for Foundation, should be a solution for BootStrap too :

sassLoader: {
  includePaths: [path.resolve(__dirname, "../../node_modules/foundation-sites/scss")]
}

harunurhan · 2016-06-27T21:14:57Z

@phiphou
I haven't done this, but adding didn't solve it. I think problem isn't because of sass-loader but others (eof, tff, woff, woff2, svg)

gearlles · 2016-06-27T23:20:44Z

@harunurhan I just tried using fonts and they work. Please check https://github.com/gearlles/angular2-webpack-starter

Looking at your stacktrace, your edited webpack-dev-server.js. Are you sure this is the right place?

richyrb00 · 2016-07-23T23:50:11Z

@gearlles your solution worked. No issues. i've tried many others floating around the internet and this is the only one that worked. This worked using the default fresh install of this repo.

niyazhussain · 2016-09-07T08:27:49Z

@gearlles can you explain how to make Bootstrap 3 (without sass) here ?

gearlles · 2016-09-07T23:30:07Z

@niyazhussain I'm afraid I can't. At that time, I just tried Sass.

gunnarsireus · 2016-11-07T18:46:13Z

this one works:
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap');
module: {
loaders: [
{ test: /.jpe?g$|.gif$|.png$|.svg$|.woff$|.woff2$|.ttf$|.eot$/, loader: "url" },
...

oli-ver · 2016-11-13T18:59:25Z

Cannot get it to work with Release 5.1.1 of angular2-webpack-starter. I tried @gearlles solution, but I am always getting errors of unmet peer dependencies:

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY extract-text-webpack-plugin@<2.0.0
+-- UNMET PEER DEPENDENCY [email protected]
`-- UNMET PEER DEPENDENCY [email protected]

Building results in errors, too:

npm run build:dev

> [email protected] prebuild:dev C:\webpack-angular2
> npm run clean:dist


> [email protected] clean:dist C:\webpack-angular2
> npm run rimraf -- dist


> [email protected] rimraf C:\webpack-angular2
> rimraf "dist"


> [email protected] build:dev C:\webpack-angular2
> webpack --config config/webpack.dev.js --progress --profile
                                                                                                       69% building modules 711/712 modules 1 active ...ode_modules\bootstrap-loader\no-op.jsTypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:536:5)
    at Object.onRender (C:\webpack-angular2\node_modules\sass-loader\index.js:282:42)
    at Object.<anonymous> (C:\webpack-angular2\node_modules\sass-loader\node_modules\async\dist\async.js:2414:31)
    at apply (C:\webpack-angular2\node_modules\sass-loader\node_modules\async\dist\async.js:40:25)
    at Object.<anonymous> (C:\webpack-angular2\node_modules\sass-loader\node_modules\async\dist\async.js:76:12)
    at Object.callback (C:\webpack-angular2\node_modules\sass-loader\node_modules\async\dist\async.js:988:16)
    at options.success (C:\webpack-angular2\node_modules\node-sass\lib\index.js:300:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:dev"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:dev: `webpack --config config/webpack.dev.js --progress --profile`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:dev script 'webpack --config config/webpack.dev.js --progress --profile'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config config/webpack.dev.js --progress --profile
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\webpack-angular2\npm-debug.log

Do I miss something?

roski · 2016-11-14T11:47:32Z

@oli-ver i think you can find answer here. This instruction for bootstrap 4 but you can make same for resolve your problem #1156 (comment)

zhekaus · 2016-12-05T11:08:32Z

@gearlles ,
I'd simplify your { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] } into simply
{ test: /\.sass$/, loaders: ['raw', 'sass'] }

dhoffi · 2016-12-17T23:50:32Z

all the steps described here work for me, except:

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
Module parse failed: /Users/hoffmd9/DBs/git/examples/angular2/angular2-spring-boot/angular2-spring-boot-frontend/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf Unexpected character '' (1:0)

can someone give me a hand on how to add loaders to https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js as there is not even a loaders:[] section under modules just a rules section.

guess I need different syntax for this? or something completely different? I'm lost.

zorgoz · 2017-07-04T13:28:41Z

@gearlles's post is really useful, it works for me.
Question: what is the method to replace/override the scss style definitions from the package? Changing the package files is obviously not the way. The method described here will add <style> element, which has higher precedence than the definition in included css file.

ghost · 2017-07-16T23:31:42Z

@zorgoz just import your custom _variables.scss before @import icon-font-path and bootstrap-sass.

tommykamkcm · 2018-02-01T17:50:28Z

Hi guys, Just to share what I've done recently on the Angular 5 Starter:

css part: install bootstrap-sass
js part: install either ng-bootstrap (based on Bootstrap 4) or ngx-bootstrap

in your styles.scss / main.scss (whatever), add
@import "partials/your-variables";
@import "partials/your-mixins";
@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

Hope this helps!

deargle · 2018-08-10T18:23:04Z

If you are using bootstrap-sass, you can import the css thusly to avoid the font import errors:

$bootstrap-sass-asset-helper: true;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

See webpack-contrib/sass-loader#40 (comment)

shahzad-0 closed this as completed Jun 16, 2016

shahzad-0 reopened this Jun 22, 2016

shahzad-0 closed this as completed Jun 22, 2016

hombrew mentioned this issue Sep 22, 2016

How to include jQuery and Twitter Bootstrap 3 using Angular 2 and Webpack FountainJS/generator-fountain-webpack#58

Closed

diegochavez mentioned this issue Nov 28, 2016

how to include bootstrap styles (bootstrap.min.css) #1220

Closed

colinskow mentioned this issue Dec 28, 2016

All guides deprecated: how to simply load bootstrap 3 and jquery in 5.1.1 #1303

Closed

catwarrior mentioned this issue Feb 28, 2017

pj-dx catwarrior/catwarrior.github.io#30

Open

borekb mentioned this issue Mar 27, 2018

Gatsby with bootstrap and jquery gatsbyjs/gatsby#3182

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to include Twitter Bootstrap 3 using webpack #696

How to include Twitter Bootstrap 3 using webpack #696

shahzad-0 commented Jun 15, 2016

MurhafSousli commented Jun 16, 2016 •

edited

Loading

shahzad-0 commented Jun 16, 2016

MurhafSousli commented Jun 16, 2016 •

edited

Loading

shahzad-0 commented Jun 16, 2016

gearlles commented Jun 22, 2016 •

edited

Loading

shahzad-0 commented Jun 22, 2016

gearlles commented Jun 22, 2016

shahzad-0 commented Jun 22, 2016

gearlles commented Jun 22, 2016

gearlles commented Jun 22, 2016

shahzad-0 commented Jun 22, 2016

MurhafSousli commented Jun 23, 2016

harunurhan commented Jun 27, 2016

gearlles commented Jun 27, 2016

harunurhan commented Jun 27, 2016

phiphou commented Jun 27, 2016

harunurhan commented Jun 27, 2016

phiphou commented Jun 27, 2016

harunurhan commented Jun 27, 2016 •

edited

Loading

gearlles commented Jun 27, 2016 •

edited

Loading

richyrb00 commented Jul 23, 2016

niyazhussain commented Sep 7, 2016

gearlles commented Sep 7, 2016 •

edited

Loading

gunnarsireus commented Nov 7, 2016

oli-ver commented Nov 13, 2016

roski commented Nov 14, 2016

zhekaus commented Dec 5, 2016 •

edited

Loading

dhoffi commented Dec 17, 2016

zorgoz commented Jul 4, 2017

ghost commented Jul 16, 2017

tommykamkcm commented Feb 1, 2018 •

edited

Loading

deargle commented Aug 10, 2018

How to include Twitter Bootstrap 3 using webpack #696

How to include Twitter Bootstrap 3 using webpack #696

Comments

shahzad-0 commented Jun 15, 2016

MurhafSousli commented Jun 16, 2016 • edited Loading

shahzad-0 commented Jun 16, 2016

MurhafSousli commented Jun 16, 2016 • edited Loading

shahzad-0 commented Jun 16, 2016

gearlles commented Jun 22, 2016 • edited Loading

shahzad-0 commented Jun 22, 2016

gearlles commented Jun 22, 2016

shahzad-0 commented Jun 22, 2016

gearlles commented Jun 22, 2016

gearlles commented Jun 22, 2016

1. Install dependencies

2. Configure Webpack

To add loaders, edit loaders:[]

To add the jQuery plugin, edit plugins: []

3. Import Bootstrap

shahzad-0 commented Jun 22, 2016

MurhafSousli commented Jun 23, 2016

harunurhan commented Jun 27, 2016

gearlles commented Jun 27, 2016

harunurhan commented Jun 27, 2016

phiphou commented Jun 27, 2016

harunurhan commented Jun 27, 2016

phiphou commented Jun 27, 2016

harunurhan commented Jun 27, 2016 • edited Loading

gearlles commented Jun 27, 2016 • edited Loading

richyrb00 commented Jul 23, 2016

niyazhussain commented Sep 7, 2016

gearlles commented Sep 7, 2016 • edited Loading

gunnarsireus commented Nov 7, 2016

oli-ver commented Nov 13, 2016

roski commented Nov 14, 2016

zhekaus commented Dec 5, 2016 • edited Loading

dhoffi commented Dec 17, 2016

zorgoz commented Jul 4, 2017

ghost commented Jul 16, 2017

tommykamkcm commented Feb 1, 2018 • edited Loading

deargle commented Aug 10, 2018

MurhafSousli commented Jun 16, 2016 •

edited

Loading

MurhafSousli commented Jun 16, 2016 •

edited

Loading

gearlles commented Jun 22, 2016 •

edited

Loading

To add loaders, edit `loaders:[]`

To add the jQuery plugin, edit `plugins: []`

harunurhan commented Jun 27, 2016 •

edited

Loading

gearlles commented Jun 27, 2016 •

edited

Loading

gearlles commented Sep 7, 2016 •

edited

Loading

zhekaus commented Dec 5, 2016 •

edited

Loading

tommykamkcm commented Feb 1, 2018 •

edited

Loading