Webpack/Angular 2: укажите порядок стилей

Question

Я новичок в Webpack, поэтому, пожалуйста, простите мое невежество.

Я использую Webpack с Angular 2 & bootstrap/jquery/font-awesome.

В моем файле Vendor.ts у меня есть следующий код;

// .... omitted 

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

У меня есть пользовательский файл SCSS, содержащие глобальные стили (контекстные на страницу не компонент), который я ввожу в Main.ts;

import "./site.scss"; 

Проблема заключается в том, что site.scss (который получает переименован в app.css от Webpack) будет размещена в заголовке ПЕРЕД самозагрузки и соавт.

Мне нужно, чтобы app.css загружался после загрузочного CSS.

Любой совет, как достичь этого?

Answer 1

Существует ленивое решение: SCSS поддерживает импорт другой CSS или SCSS файл в один.

Так что в вашем случае вы можете импортировать bootstrap в свой файл site.scss и использовать только site.scss (напишите инструкцию по импорту в начало, поэтому код ниже будет переопределен).

Для получения дополнительной информации: Import regular CSS file in SCSS file?