Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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