ng serve breaks when using @import in index.html

[ricardochl]

Command

serve

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.3.4

Description

I'm encountering an issue where ng serve fails to build and serve my Angular application when I use the @import directive in the index.html file. This behavior is unexpected as the @import rule is a standard CSS mechanism.

Minimal Reproduction

1. Create a new project with ng new (using Sass (SCSS))
2. Add the following piece of code to the head tag in the index.html file

  <style>
    @import url('./styles.css');
  </style>

3. Run ng serve

Exception or Error

Unable to resolve `@import "./styles.css"` from `my-path`
[vite] Internal server error: [postcss] ENOENT: no such file or directory, open './styles.css'
Plugin: vite:css
File: /index.html?html-proxy&direct&index=0.css:undefined:NaN

Your Environment

Angular CLI: 18.1.3
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1801.3 (cli-only)
@angular-devkit/core         18.1.3 (cli-only)
@angular-devkit/schematics   18.1.3 (cli-only)
@schematics/angular          18.1.3 (cli-only)

Anything else relevant?

No response

[Shaun-Avaya]

any update ?

[alan-agius4]

Out of curiosity, why do you need to use @import instead of a <link> element? The latter should be preferred because it allows the browser to download stylesheets in parallel, whereas @import forces a sequential download, which is slower and can delay page rendering.

[alan-agius4]

Closing due to lack of feedback and the workaround using <link> is better for performance.