ViTest | Cannot import `.css` files that are compiled from `.scss`

Question

I use some .scss files as part of a re-usable ES6 module (ESM). As part of the build process I am running yarn sass -I node_modules src:dist to compile all of these files to .css and they are output to the /dist directory.

Now, since it is an ESM modules I have to specify the file extension when importing a file, like import "my-styles.css". As with my other imports, I want to specify the extension that the file is compiled to, not the one used in the /src folder.

Unfortunately, unlike with my other imports, vitest chokes on the .css import - saying the file doesn't exist. Is there a way to get vitest to either resolve the .css file imports as .scss when not found, or else to otherwise mock the .css imports?

Answer 1

Found a solution. Added the following to my vitest config to have it resolve '.css' imports as '.scss' files instead:

resolve: {
    alias: [
      {
        find: /^(.*)\.css$/,
        replacement: "$1.scss"
      }
    ]
  }

Albeit, this would be problematic if you had a combination of .css and .scss files and/or .sass files in your source directory. So you need to pick one and stick to it for the project.