warning: "@charset" must be the first rule in the file

[ssougnez]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

I'm not sure as the issue didn't occur with ng12 but maybe just because I was building in development mode by default (and the issue only occurs on production mode)

Description

I'm using the "styles" section of the angular.json file to include additional (s)css files:

"styles": [
  "node_modules/@sfpd/ng-ui/themes/default.scss",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/tippy.js/dist/tippy.css",
  "src/styles.scss"
],

When trying to build the solution with this, I get a lot of warnings like this:

Warning:  > styles.65c1c4ac510bd85a.css:384:0: warning: "@charset" must be the first rule in the file
    384 │ @charset "UTF-8";
        ╵ ~~~~~~~~
   styles.65c1c4ac510bd85a.css:383:1350: note: This rule cannot come before a "@charset" rule
    383 │ ...:transparent;border-style:solid}.tippy-content{position:relative...

The weird thing is that this happens whatever the order of the pathes in the array expect when "src/syles.scss" comes first. However, this is not an option for me as I override some styles in this file, so it needs to come last.

Another weird thing is that if I open the corresponding generated styles file, "@charset" only appears as the first rule of the file...

I also tried to duplicate the "styles.scss" file, rename it in "styles2.scss" and add it as the first entry of the styles array (to see if it somehow fixes the issue) but it didn't.

Note there is no "@charset" rule in my "styles.scss", so I really don't understand why the issue does not appear when it comes first in the array.

These are only warnings and the build is valid, however, it creates a lot of noise during the compilation.

Last remark is that it only occurs in production mode, not in development.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 13.0.1
Node: 14.16.1
Package Manager: yarn 1.22.4
OS: win32 x64

Angular: 13.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.1
@angular-devkit/build-angular   13.0.1
@angular-devkit/core            13.0.1
@angular-devkit/schematics      13.0.1
@angular/cli                    13.0.1
@schematics/angular             13.0.1
rxjs                            6.6.7
typescript                      4.4.4

Anything else?

No response

[ArtVS]

A quick fix I found is to put "src/styles.scss" at the beginning of the "styles" array, then you'd get only one warning or so... Otherwise there're hundreds of warnings

[ssougnez]

A quick fix I found is to put "src/styles.scss" at the beginning of the "styles" array, then you'd get only one warning or so... Otherwise there're hundreds of warnings

Indeed but this is not a solution for me as I override some css variables in the styles.scss fils so it must be at the end ;-)

[neo-xy]

same here:/

[SamerX]

I confirm the issue .. the problem is there is no way so far to eliminate the warnings by the compiler options.

[egos-dev]

So what is the solution here ? I have the same issue once i migrated to version 13

[ssougnez]

It seems that they implemented a fix so I guess we have to wait for the next version to be released.

[manu1080]

I have the same problem migrating from angular 12 to 13

[alan-agius4]

This should not longer be an issue since 13.0.2.

Please see https://github.com/angular/angular-cli/releases/tag/13.0.2 for more information about this release.

[wis-dev]

It's already fixed on version 13.0.1.
After update, i remove node_modules and package-lock.json then run npm i.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}