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

Question

I am working on angular app and while run the app it's not showing any errors but I'm getting this kind of warning's in many css files.

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

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

What I have imported on 114 line is this.

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

Where ever I have imported like this in all that css showing this kind of warnings.

Is there any solution for this?

please put complete component code along with the question so we can check actual problem. — Sain Pradeep, Sep 19 '19 at 05:16
put import line top of the file and move all the css import to the styles array in the angular.json file. — Sain Pradeep, Sep 23 '19 at 06:28
@SainPradeep good solution. But, isn't this make css project wise ? What if you would like to import some css component wise ? — Davut Gürbüz, Jun 22 '20 at 05:31

score 20 · Answer 1 · answered Oct 03 '20 at 14:56

I want to explain it through two screenshots that why it is giving warning. Because you are not using @import ....line at first line. See this screenshot it is giving warning.

see below screenshot this is the solution:

Warning has gone because I have used @import ... line at first line in styles.css file.

score 3 · Answer 2 · answered Sep 04 '20 at 10:52

3

Your css loader plugin attempts to follow the @import where its not at the top of (first lines of) the css file. @import statements must precede all other statements (besides @charset).

answered Sep 04 '20 at 10:52

Amirhossein Mehrvarzi

18,024
7
45
70

score 1 · Answer 3 · answered May 19 '22 at 11:34

1

I think this might help It solved it for me by replacing @import "@angular/material/_theming.scss"; with @use "~@angular/material" as mat;

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

answered May 19 '22 at 11:34

Amany Zohair

11
2

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

3 Answers3