3

I am new to Webpack, so please forgive my ignorance.

I am using Webpack with Angular 2 & bootstrap/jquery/font-awesome.

In my Vendor.ts file, I have the following code;

// .... omitted

// Misc
import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-webpack';

I have a custom SCSS file that contains global styles (scoped to the page not component), which I am importing in Main.ts;

import "./site.scss";

The problem is that the site.scss (which gets renamed to app.css by Webpack) is being placed in the header BEFORE bootstrap et al.

I need the app.css to be loaded after the bootstrap CSS.

Any advice how to achieve this?

app.css loaded incorrect order

Jon Preece
  • 715
  • 8
  • 13

1 Answers1

0

There is a lazy solution: Scss supports importing another css or scss file into one.

So in your case you can import bootstrap into your site.scss file and use site.scss only (write the import statement to beginning so code below is gonna be overriden).

For more: Import regular CSS file in SCSS file?

Community
  • 1
  • 1
Tuna Yagci
  • 300
  • 1
  • 9