"Can't find stylesheet to import" when using --threads=false

Describe the bug

“vitest run” works fine, tests pass “vitest run --threads=false” errors out with “can’t find stylesheet to import”

in my repro, styles.scss is imported into App.tsx, and it in turn imports a stylesheet called “colors.scss”

I was only using threads=false to try to get around a Node issue in my CI build, but it doesn’t work.

Reproduction

https://github.com/oneillsp96/vitest-error-2

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 16.54 GB / 31.83 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.1
    vite: ^2.9.5 => 2.9.5
    vitest: ^0.9.3 => 0.9.3

Used Package Manager

yarn

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:11

Top GitHub Comments

2reactions

nathanchickencommented, May 19, 2022

The only real place I get this being an issue is in the preprocessorOptions part.

So to circumvent the issue for now I’m doing this to basically ensure that it’s an absolute path. I’m basically duplicating the alias and it seems to be working. Within the SCSS files in the repo that a test they are using relative paths.

{
resolve: {
  {
      find: /^@\//,
      replacement: `${path.resolve(__dirname, 'src')}/`,
    },
},
// ...
css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "sass:math";
            @import "${path.resolve(__dirname, 'src')}/styles/_variables.scss";
            @import "${path.resolve(__dirname, 'src')}/styles/_mixins.scss";
            
          `,
        },
      },
    },
 }

2reactions

ChenYCLcommented, May 19, 2022

Hello,get same issue. lerna project , i need some scss file import from theme pkg. Have any solution solve this? thx

Top Results From Across the Web

Sass "Error: Can't find stylesheet to import."

I finally worked around this problem by using Grunt instead of sass to compile and watch the SCSS files. After running ...

Laravel NPM run Dev error "Can't find stylesheet to import."

So I did some googling and found out about how to using laravel mix and everything. and this compass/css3 is something they import...

Configuring Vitest

When importing such dependencies in Node environment using named exports, ... threads (will always be '1' , if run with threads: false )....

css-loader | webpack - JS.ORG

The css-loader interprets @import and url() like import/require() and will resolve ... Using false value increase performance because we avoid parsing CSS ......

[Support Guide] Netlify app builds locally but fails on ...

Build failed because of webpack errors (Next.js + AWS Amplify). Typescript Build Error with Next.js. Sass Error: Can't find stylesheet to import.