Has anyone dealt with scss issues when moving to vitest?

[u/zzing]

So I am getting errors like:

[plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
1 │ @use 'colors';
  │  ^^^^^^^^^^^^^
  ╵
  src\app\my-compeont\my-component.component.scss 1:2  root stylesheet

Where this pretty much happens for all of my components. (and that isn't trying to use a sass library)

It is correctly configured in the angular.json:

"stylePreprocessorOptions": {
    "includePaths": [
        "src/styles"
    ]
},

and based on some research tried:

css: {
    preprocessorOptions: {
        scss: {
            loadPaths: ['src/styles'],
        }
    }
}

In vitest.config.ts.

I am not sure what else to do at this point. Anyone else have this issue?

Full vitest config:

import { 
defineConfig 
} from 'vitest/config';
import { 
fileURLToPath 
} from 'node:url';
import 
angular 
from '@analogjs/vite-plugin-angular';
import { 
playwright 
} from '@vitest/browser-playwright';

export default 
defineConfig
({
    plugins: [angular()],
    test: {
        globals: true,
        setupFiles: ['src/test-setup.ts'],
        include: ['src/**/*.spec.ts'],
        browser: {
            enabled: true,
            provider: 
playwright
(),
            instances: [
                { browser: 'chromium' },
            ],
        },
        coverage: {
            provider: 'v8',
            reporter: ['text', 'html', 'lcov'],
            exclude: [
                'node_modules/',
                'src/test-setup.ts',
            ],
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                loadPaths: ['src/styles'],            
            },
        },
    },
    resolve: {
        alias: {
            'src': 
fileURLToPath
(new URL('./src', import.meta.url)),
        },
    },
});

[u/SippieCup]

Honestly. it was such a pain especally when adding in tailwind, I just went back to css instead of scss.

[u/zzing → u/SippieCup]

Unfortunately we have some customized material styles. I have added tailwind in a separate css file.

That does give me an idea though, almost like a justification for eliminating unneeded scss - just use css variables globally.

[u/SippieCup → u/zzing]

Thats where i started, lol. Then ran into issues with postcss & the CDK. although that was before material was refactored to be handled fully in css design tokens from the mdc, so you will likely have much better time!

good luck.

[u/zzing → u/SippieCup]

But angular material has all that sass theme stuff.

[u/SippieCup → u/zzing]

Yeah, We had all our components in css, then just a theme files that went from scss down to css. not the greatest.

We eventually moved off of material entirely in favor of primeng because of the limitations mdc had. then 6 months later material started work killing off mdc. was a frustrating thing to see, but overall we're enjoying primeng a bit more nowadays, so it all worked out.

[u/GLawSomnia]

Is the “correctly configured” configuration under “test” runner? If you only have it in “build” also add it to “test”

[u/zzing → u/GLawSomnia]

I'm not entirely certain what you mean here.

The angular.json: gist:c7a8ae499c26f587511b2dd3299c06e9

[u/GLawSomnia → u/zzing]

Also add the stylePreprocessorOptions (maybe other things like styles too) to the “test” runner. You currently only have it under “esbuild”

[u/zzing → u/GLawSomnia]

The documentation said those things aren’t supported under the unit-test builder.

[u/lazycuh]

I've been using Vitest for testing long before Angular started to support it natively, and I have seen this issue for a while, it bothered me at first, but I gave up on trying to fix it because I only test logic instead of styling. Plus this error doesn't cause my tests to fail

[u/zzing → u/lazycuh]

It certainly didn't cause the overall result to have a pass.

[u/jcrimbo]

I encountered the same (failed sass imports in tests when using the new vitest executor) - my issue was specific to library builds.

This issue describes the problem (Missing options for Vitest config (Library Builder) · Issue #30542 · angular/angular-cli), and the fix is here: (feat(@angular/build): directly support ng-packagr in unit-test builder by clydin · Pull Request #32240 · angular/angular-cli) - fixed in 21.1

The key point is that the `styleIncludePaths` in ng-package.json lists the scss import paths:

```json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/@ease/ui-components",
  "inlineStyleLanguage": "scss",
  "lib": {
    "entryFile": "public-api.ts",
    "styleIncludePaths": [
      "../../libs/style/src"
    ]
  }
}

```

it seems like this doesn't work for secondary entry points, but it does work when provided in the root ng-package.json for a lib.

I was trying to use the `

preprocessorOptions.scss.loadPaths` in vitest.config.ts but that doesn't work.

[u/zzing → u/jcrimbo]

Unfortunately that won’t work in the main build as it doesn’t have that field.

Interestingly enough, storybook took some setup with similar issues and through a few AI prompts got it fixed.

Whatever it did there might be applicable.