Development server logging: Unable to resolve @import...

[aljazdolenc]

Please provide the environment you discovered this bug in.

https://stackblitz.com/edit/stackblitz-starters-tf1kme?file=analog-project%2Fsrc%2Fapp%2Fapp.component.ts

Which area/package is the issue in?

create-analog

Description

Problem:

While running development server with scss inline styles. When I imported variable from _variables.scss file and use it, I noticed this error being logged, but styles did work on the server page.

Unable to resolve `@import "../variables"` from /home/projects/stackblitz-starters-tf1kme/analog-project/src/app
Error: [postcss] ENOENT: no such file or directory, open '../variables'

Expectation:

Not to see any errors if file exists and served page correctly applies styles.

Steps to reproduce:

1. run pnpm create analog
2. add to vite config inlineStylesExtension: 'scss'
3. change styles.css to styles.scss
4. update index.html import from styles.css to styles.scss
5. create _variables.scss file with single sass variable
6. import variables file inside app.component.ts and use variable
7. run ng serve

Please provide the exception or error you saw

Unable to resolve `@import "../variables"` from /home/projects/stackblitz-starters-tf1kme/analog-project/src/app
Error: [postcss] ENOENT: no such file or directory, open '../variables'

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[aljazdolenc]

It did not log error, when I used @use instead of the @import

  @use '../variables' as *;

:host {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  background: $primary;
  height: 100vh;
  width: 100vw;
}