How to use Twitter bootstrap.css?

[EmilTemirov]

The question in the topic. Any ideas?

[fesor]

@EmilTemirov, npm install bootstrap, and then just import it css.

Maybe you should consider using angular-ui-bootstrap instead.

[EmilTemirov]

If I try just import bootstrap.css, I will have a fonts loading problem. I found solution with using bootstrap-loader. I think it would be very useful to have a "vendor" directory where you can load any assets (js, css, images, fonts, etc.) and then these all assets will automatically included in build. I like how's this working in Ember-CLI

[fesor]

@EmilTemirov I see, this is how I handle this:

// webpack.config.js
   loaders: [
      { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
      { test: /\.(png)$/, loader: 'url-loader?limit=100000' },
      { test: /\.woff(2)?(\?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: /\.jade$/, loader: "jade" },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.less$/, loader: 'style!css!less' },
      { test: /\.css$/,  loader: 'style!css' }
    ]

This loaders will copy all fonts from vendor packages to your dist directory and also rewrite paths in CSS. No need for any additional directories. Please see url-loader documentation for more details.

[ktkanishka]

Hi, Im new to Angular and ES6 and using this https://github.com/gebidesign/NG6-starter-sass.git fork. I need to use angular bootstrap in my project globally and in each component (i.e. home). How would I import it to apply globally? in which file? Can someone please provide code example or is there any fork to use with this purpose? Thanks in advance.

[blowsie]

@ktkanishka my fork has SASS support, amongst other things https://github.com/blowsie/NG6-starter

[bmsdave]

@EmilTemirov, hey. I'm use bootstrap-loader, it's very simple ( watch example on https://github.com/shakacode/bootstrap-loader ). As example es5.1 + sass + bootstrap watch my repo - https://github.com/bmsdave/NG6-starter.

if you want to use ES6, do not remove the "!babel" of the loader

[nusix]

@EmilTemirov Hi, I was facing the same problem and spent some hours to sort it out - just to have working bootstrap with NG6-starter. Here is three simple steps and commit how I've achieved that. Hope it helps:) https://github.com/nusix/NG6-starter-with-bootstrap