angular - 网页包/Angular 2 : specify order of styles

标签 angular webpack bootstrap-4

我是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(被 Webpack 重命名为 app.css)被放置在 header BEFORE bootstrap 等。

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

有什么建议可以实现吗?

app.css loaded incorrect order

最佳答案

有一个偷懒的方案:Scss支持导入另一个css或者scss文件导入一个。

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

更多: Import regular CSS file in SCSS file?

关于angular - 网页包/Angular 2 : specify order of styles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38280182/

相关文章:

css - Webpack:有没有办法在处理之前替换导入的文件路径?

angular - FormArray 动态形式angular

Angular 6 网格图 block 换行

javascript - 如何使用 webpack 跳过 css 文件中的所有依赖项

webpack - 如何在 webpack 中使用 <img src>?

html - 如何使背景图像适合所有屏幕尺寸?

angular - 无法使用 Ionic2/3 Social Share 共享图像

angular - 垫子工具栏对齐中的 Material 图标中的文本

html - 如何删除BS4中标题和列之间的空格

当鼠标悬停在一个图像上时,jquery 或 CSS 会使其余图像变暗