Overriding bootstrap's css with our custom css using webpack

Question

I am making an Angular2 application and I am using bootstrap for styling. I am using webpack as module bundler. I have included bootstrap library and my global custom style-sheet from vendor.ts. Here is my vendor.ts:

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap

import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-sass-loader';
// You can import js, ts, css, sass, ...

import '../public/css/styles.css';

Normally you would have to link your custom css after the bootstrap's css in an HTML file (eg.)

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">

to override the bootstrap's style with your own style. How do I do it with webpack? Thanks.

Ashwin Kumar · Accepted Answer · 2016-11-07 07:31:36Z

2

This has nothing to do with angular 2. You may include the css files in the order of overriding in index.html and use them like with any other project. However, if you have component specific styles, you can use them within components with styles/styleUrls metadata attribute for encapsulating css specific to that component alone.

answered Nov 7, 2016 at 7:31

Ashwin Kumar

7415 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kanra-san Over a year ago

I know it works fine when i include the files through index.html and I also know how to use styles for component specific styles. I am exploring ways to get the same results by importing the style-sheets and JavaScript files through vendor.ts so that i can have a index.html with just basic html tags. Everything that i want is imported but my custom css(global) is being overwritten by bootstrap's css. So I'm actually looking for a way to import the the files in vendor.ts so that it does not get overridden. (FYI: I am using webpack.)

Collectives™ on Stack Overflow

Overriding bootstrap's css with our custom css using webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related