警告：@import 必须位于所有其他语句之前（@charset 除外）

Question

我正在开发 Angular 应用程序，在运行该应用程序时，它没有显示任何错误，但我在许多 css 文件中收到此类警告。

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

 (114:1) @import must precede all other statements (besides @charset)

我在114线上导入的是这个。

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

我在所有显示此类警告的 css 中都像这样导入过。

这个问题有什么解决办法吗？

Answer 1

我想通过两张截图来解释为什么它会发出警告。 因为您没有在第一行使用 @import ....line 。 看到这个屏幕截图，它发出警告。

请参阅下面的屏幕截图，这就是解决方案：

警告已消失，因为我在 styles.css 文件的第一行使用了 @import ... 行。

Answer 2

您的 css 加载器插件尝试遵循

@import

，其中 它不在 css 文件（第一行）的顶部。

@import

语句必须位于所有其他语句之前（

@charset

除外）。

Answer 3

我认为这可能有帮助 它通过将

@import "@angular/material/_theming.scss";

替换为

@use "~@angular/material" as mat;

为我解决了这个问题

https://stackoverflow.com/a/67850942/16298287

Answer 4

您应该将导入替换到代码顶部...