SCSS files are not compiled when being imported from CSS files

[art-solopov]

Describe the bug

When I'm trying to import an SCSS file from a CSS file, I see either:

• An "unknown word" error from postcss-import if there are any SCSS comments;
• A "cannot find" error from postcss-import if there are any imports inside SCSS (even though postcss-import shouldn't be handling those)
• Untransformed SCSS being added as if it was CSS

This makes me suspect that SCSS imports from CSS aren't being transformed properly.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rrleev?file=styles/button.scss

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 5600H with Radeon Graphics
    Memory: 6.88 GB / 14.99 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.12.0 - ~/.asdf/installs/nodejs/18.12.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.12.0/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chromium: 109.0.5414.119
    Firefox: 109.0
  npmPackages:
    vite: ^4.0.0 => 4.0.4

Used Package Manager

yarn

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[cloudfroster]

There is a problem with your code in button.scss, it should be:

/* wrong code @import './variables'; */
@import './_variables.scss';

Need to complete the suffix and fix file name.

[art-solopov]

First of all, this doesn't match Sass's import behaviour.

And second, there's still an issue of Sass code being injected into CSS without any compilation.

[TheElegantCoding]

i have this error, the varaibles are not recognize, but only happens in qwik i will put my example here.

https://github.com/LuisCoderDev/qwik-scss

also changing te imports with underscore and .scss still doenst work for me

[castrix]

I'm having the same issue as well, I troubleshoot this for weeks and still haven't find the solution. But I need to thank you now, I just found that I had a css file that import scss which causing the issue, but the error message doesn't point to the correct file, it's pointing to the other scss file.

the error looks like this:

[vite:css] [postcss] ENOENT: no such file or directory, stat '/home/castrix/myapp/variables'
file: /home/castrix/myapp/src/styles/index.scss:undefined:undefined
error during build:
Error: [postcss] ENOENT: no such file or directory, stat '/home/castrix/myapp/variables'
error Command failed with exit code 1.

But the actual issue was caused by my icons.css which has @import 'variables'