Webpack / Angular 2：指定样式的顺序

Question

我是Webpack的新手，所以请原谅我的无知。

我正在使用带有Angular 2＆amp;的Webpack。引导/ jquery的/字体真棒。

在我的Vendor.ts文件中，我有以下代码;

// .... omitted

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

我有一个自定义SCSS文件，其中包含我在Main.ts中导入的全局样式（作用于页面而不是组件）;

import "./site.scss";

问题是site.scss（由Webpack重命名为app.css）放在标题 BEFORE bootstrap et al中。

我需要在bootstrap CSS之后加载app.css。

有任何建议如何实现这一目标？

Answer 1

有一个懒惰的解决方案：Scss支持将另一个css或scss文件导入一个。

因此，在您的情况下，您可以将bootstrap导入到site.scss文件中并仅使用site.scss（将import语句写入开头，因此下面的代码将被覆盖）。

更多： Import regular CSS file in SCSS file?