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

[oneillsp96]

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

• [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] 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.

[Crevitus]

I can confirm I am also encountering this issue on the latest version of vitest with threading turned off:

Error: Can't find stylesheet to import.
  ╷
2 │ @import "bootstrap/scss/bootstrap";
...

This is imported into my index.scss file. The main Vite build works.

Versions:

npmPackages:
   @vitejs/plugin-react: 1.3.2
   vite: 2.9.8 
   vitest: 0.12.4

[nathanchicken]

I'm getting this too, but doesn't matter if I'm using threads=false or not.

vite build runs fine though.

I have in my main config this

css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "sass:math";
            @import "@/styles/_variables.scss";
            @import "@/styles/_mixins.scss";
          `,
        },
      },

And npx vitest run gives me this:

Error: Can't find stylesheet to import.
 @import "@/styles/_variables.scss";
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^

I"ve tried a few combinations of filenames with and without aliases but to no avail.

If I change all imports to their absolute paths on my filesystem, eg:

@import '/Users/username/path-to-repo/src/styles/_variables.scss';

Then it starts working, so it's not resolving the aliases properly for SCSS as far as I can see, while in Vite itself it's all working fine.

[ChenYCL]

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

[tansin]

I have the same issue. I have found that the actual error occurs even though the resolution may have worked properly.

1. The style is imported in the vue component like this:

<style lang="scss" scoped>
@import "../../../variables";
// ...

2. When I start vitest I've got this error, as we all:

Can't find stylesheet to import.
  ╷
2 │ @import "../../../variables";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵

3. Then I've deleted the style file and got the same error. (restored the file afterwards).
4. Then I've added following resolve config to the vitest.config.ts. It just replaces the relative path string found in import directive by the actual absolute path. (I've tested also various regex patterns and file names getting same result, but this config here is the simplest one):

export default defineConfig({
  // ...
  resolve: {
    alias: [
      {
        find: "../../../variables",
        replacement: "/Users/user/git/project/_variables.scss",
      },
    ],
  },
})

5. Run vitest and still got the same error. Wait, what? I've provided the correct absolute path as replacement. Hmm.
6. But then I've deleted the style file again and got a new error:

Error: ENOENT: no such file or directory, open '/Users/user/git/project/_variables.scss'

It means, that even after resolving to absolute path manually the resolved path seems to not be consumed properly.

[nathanchicken]

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";
            
          `,
        },
      },
    },
 }

[ChenYCL]

// vite.config.ts  it works

resolve: {
  alias: [
    {
      find: /^~@lui/,
      replacement: `${path.resolve(__dirname, 'packages')}/`,
    },
  ],
},

[yichengsong318]

I am getting the same issue. Vue3 + quasar

// vite.config.js quasar({ sassVariables: 'src/styles/quasar.variables.scss' })

[nicolas-camacho]

Since it works with absolute routes, I ended up creating an alias for my variables file

Project info

Framework: Next JS

vitest.config.ts

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
  resolve: {
      alias: [
          {
              find: 'variables',
              replacement: `${path.resolve(__dirname)}/styles/variables.scss`
          }
      ]
  }
})

{file}.scss

@import 'variables';

It is working for me right now but it is not an optimal solution

[Lyokolux]

Ok it seems that relative import are broken. I have the same issue as https://github.com/vitest-dev/vitest/issues/1230#issuecomment-1131716834

It happens with or without --threads=false.

If the main scss files import other files, then the paths have to be absolute, else it will return the error Can't find stylesheet to import..

My workaround (for one file):

import { defineNuxtConfig } from 'nuxt'
import { resolve } from 'path'

const r = (p: string) => resolve(__dirname, p)

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: { additionalData: `@use "${r('assets/scss/global.scss')}";` },
      },
    }
  }
})

If there is multiple files, my workaround becomes:

css: {
      preprocessorOptions: {
        scss: { additionalData: `@use "${r('assets/scss/global.scss')}";@use "${r('assets/scss/reset.scss')}";@use "${r('assets/scss/typography.scss')}";@use "${r('assets/scss/fonts.scss')}";@use "${r('assets/scss/spacing.scss')}";@use "${r('assets/scss/dripicons.scss')}";@use "${r('assets/scss/colors.scss')}"; @use "${r('assets/scss/utils/layout.scss')}"; @use "${r('assets/scss/utils/overflow.scss')}"; ` },
      },
    }

Basically chaining the @use directive for each file + commenting the imports in my global.scss that imports all these files OR not importing the global.scss file.

[alexmccabe]

None of the above suggestions seem to be working for me

const resolve = (filePath: string) => {
  return path.resolve(__dirname, filePath);
};

css: {
  preprocessorOptions: {
    scss: {
      additionalData: [
        // Shared global scss utilities.
        `@import "${resolve('src/scss/00-base/index.scss')}";`,
        '',
      ].join('\n'),
    },
  },
},
test: {
  threads: false,
}

[alexmccabe]

The workaround I got to behave was:

test: {
 minThreads: 0,
 maxThreads: 1,
}

This seems silly since this is effectively doing the same thing? 🤔