Angular 14 build fails when importing css in source code from node modules

[thaoula]

🐞 Bug report

Command (mark with an x)

• new
• [ x] build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, this worked in Angular 13.3.10 and prior Yes, the previous version in which this bug was not present was: ....

Description

A clear and concise description of the problem...

We are utilising 3rd party components Froala Editor and Fullcalendar where we import there css files in source code like the following -

In the case of Froala we do the following

import 'froala-editor/css/plugins/draggable.css';
import 'froala-editor/css/plugins/table.css';

In the case of Fullcalendar they may be doing inside their own component and the following issue has been added their repo -
fullcalendar/fullcalendar#6869

When running ng build you receive the following build error that look like the following -

./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

🔬 Minimal Reproduction

🔥 Exception or Error

Error

./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

./node_modules/froala-editor/css/plugins/table.css:7:0 - Error: Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

🌍 Your Environment

Angular CLI: 14.0.0
Node: 18.2.0 (Unsupported)
Package Manager: npm 8.9.0 
OS: darwin arm64

Angular: 14.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.0
@angular-devkit/build-angular   14.0.0
@angular-devkit/core            14.0.0
@angular-devkit/schematics      14.0.0
@angular/cdk                    13.0.0
@schematics/angular             14.0.0
rxjs                            7.5.5
typescript                      4.6.2

Anything else relevant?

[alan-agius4]

This is expected and is one of the breaking changes in version 14 and pointed out in our release page.

We now issue a build time error when importing a CSS file as an ECMA module. This is non standard and Webpack specific feature and as such this feature was never supported by the Angular CLI.

[oBusk]

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

• https://angular.io/guide/workspace-config#styles-and-scripts-configuration
• https://stackoverflow.com/a/56367905/1433417

[Hamarhu]

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

• https://angular.io/guide/workspace-config#styles-and-scripts-configuration
• https://stackoverflow.com/a/56367905/1433417

Thank you! This was helpfull!

[salimchemes]

If anyone else ends up here, for me the solution was that you can specify multiple scripts/styles bundles in the angular.json so we were able to create separate bundles that we can load when needed.

// angular.json > projects > {project_name} > architect > build > options
styles: [
  "your/styles/to/always/include.css",
  {
    "input": "your/custom/style.scss"
    "inject": false,
    "bundleName": "a-good-bundle-name"
  }
]

Which will preprocess your style and output a a-good-bundle-name.css in your output. If inject: false, the name is not hashed.

• https://angular.io/guide/workspace-config#styles-and-scripts-configuration
• https://stackoverflow.com/a/56367905/1433417

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here #12552 but since importing css throws now an error they wont work anymore
Thanks

[oBusk]

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here #12552 but since importing css throws now an error they wont work anymore
Thanks

I don't have solution for that. If anyone has a solution for it, I'd be happy to hear. But går us, those files are changed so rarely that i think it's fine

[salimchemes]

How do you deal with caching issues? Since the file is not hashed the browser will cache it. There are some workarounds here #12552 but since importing css throws now an error they wont work anymore
Thanks

I don't have solution for that. If anyone has a solution for it, I'd be happy to hear. But går us, those files are changed so rarely that i think it's fine

I finally ended up adding a post build script to generate hashed files (with https://www.npmjs.com/package/hasha)
#12552 (comment)

Then added a validation to consume hashed file when is a production build. Otherwise use not hashed ones.

To summarize

1. added post build script is going to generate css hashed files and avoid caching issues
2. added a validation to use these files when it is a production build

[Delagen]

@alan-agius4 I think it must be reopened because it is stable SASS functionality. When you compile static SASS files (specified in styles in angular.json) it has to work as documented.

[alan-agius4]

It does work as documented unless there is a mistake, as such if you think it is incorrectly documented please provide a link where the docs are not correct.

Importing a Sass/CSS file inside your TypeScript/JavaScript file like an ECMA module is no not a standard functionality and as such this part is not supported.

[Delagen]

@alan-agius4 Yes. Sorry. Is is bug of @fullcalendar library

[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.}