Angular2/4 with bootstrap scss (Angular webpack starter)

Question

I am trying to setup a simple project with Angular2/4 with bootstrap.

I cloned the Angular-Webpack-Starter repo, removed the things which are no longer needed and added bootstrap according to the link https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

When I start the server through npm run server, it is getting compiled correctly. But css/scss are not getting loaded.

As you see in the below snapshot, css are not getting loaded.

I am using the following HTML in the HomeComponent

<div>
    <h1>HOME</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-6"> 1 of 2 </div>
            <div class="col-md-6"> 1 of 2 </div>
        </div>
        <div class="row">
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
        </div>
    </div>
</div>

What is that I am doing wrong here?

Answer 1

If you are talking about the bootstrap css files, then those should be included in your index.html file like so

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

You could also reference the bootstrap package installed in the node_modules folder after running npm install from the root directory of the project

However, if it is a component's css that is not getting loaded, then try setting encapsulation to None like so. When you load a component's css, it is not applied globally but making ViewEncapsulation.None will make them global.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})

Does this answer your question? Also I would recommend using the AngularCLI tool and then running ng serve

Answer 2

Once you downloaded the seed application , you have to install all the node packages mentioned in package.json. To install navigate in to the root directory and run the command

npm install

If bootstrap is not installed , install the dependencies and refer the dependencies directly from the node_modules downloaded in your directory

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