I am currently developing an Angular2 application and have chosen to use bootstrap for styling. To help with module bundling, I am utilizing webpack as my module bundler. In order to include the necessary libraries and custom stylesheets, I have set up my vendor.ts file accordingly. Here is a snippet from 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 such as jQuery, Lodash or Bootstrap
import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-sass-loader';
// Additional imports for js, ts, css, sass, ...
import '../public/css/styles.css';
Traditionally, in an HTML file you would need to ensure that your custom CSS is linked after the bootstrap CSS, like this:
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">
By doing this, you effectively override any conflicting styles from bootstrap with your own. How can I achieve the same functionality with webpack? Your insights are greatly appreciated.