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

[jScope]

Hey,

I'm currently struggling when I try to migrate my project into your webpack-starter. Most things work okay but I need bootstrap classes from bootstrap.min.css.

Currently I`ve got the following in my webpack.common.js:

module: {
rules: [
{
test: /.(woff2?|ttf|eot|svg)$/,
use: 'file-loader'
},
{
test: /.css$/,
use: ['to-string-loader', 'css-loader']
}
]
}

In my main.browser.ts I currently have:

import './assets/css/bootstrap/css/bootstrap.min.css';
import './assets/css/styles.css';

but I'm not sure if I have to do a require here instead but both doesn't work for me. I get no error message but the bootstrap grid system is not available when I run localhost:3000.

Any help would be very appreciated.

[diegochavez]

Hi @jScope,

You should looks in to this issue #696 some folks added solutions to this problem, instead of adding your own bootstrap on assets folder you can install with npm,

Best,

[jScope]

Thank you @diegochavez!

I already know about this solution. I was just asking myself if there is a way to only include the "bootstrap.min.css" because I just use bootstrap grid structure and other css classes. I don`t really need bootstrap.min.js or even jQuery, which increase the size of my application.

[jScope]

Today I gave it another try and firts re-installed the css-loader with

npm install css-loader --save-dev

In my main.browser.ts I required my bootstrap.min.css
require('./assets/css/bootstrap/css/bootstrap.min.css');

I also changed the rule for css files to

{
test: /.css$/,
use: ['style-loader', 'css-loader']
}

Don't know what exactly did the trick but for me it's okay at this point.

[psks1204]

to use bootstrap and learn how to create new component
watch this video hope it helps!

https://youtu.be/lt0hAoUES2s