How to use scss pkg imports?

[todor-a]

Hey, can vite be used with scss pkg imports?

All I found on the topic is this comment, and this article.

Both did not work for me - vite errors with Error: Can't find stylesheet to import..

I tried both the modern and the legacy compiler with no luck.

[hi-ogawa]

Hmm, that's probably intended to work. Can you provide a reproduction? If we can verify it's not working with api: "modern" or "modern-compiler", then we can reopen the issue.

[todor-a]

I will do my best to provide a reproduction as this is with a private package. Posting my config while working on the reproduction:

Dependencies:

• "sass-embedded": "1.77.8"
• "vite": "5.4.2"

vite.config.ts:

import { NodePackageImporter } from 'sass-embedded';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        pkgImporter: new NodePackageImporter(),
        api: 'modern-compiler',
      },
  }
});

The import:

@use "pkg:@org/shared-styles";

The package's package.json:

{
  "sass": "design-system/_index.scss"
}

The _index.scss:

@forward "./tokens/";

cmd + click in vscode successfully leads to the _index.scss file, if this is any indication at all.

[todor-a]

Hm, after running build with debug I see this:

transforming (293) src/config/Config.ts  vite:resolve 0.92ms pkg:@org/shared-shared -> null +240ms

Seems like something is wrong with how the @org/shared-shared exports the styles. Will look into it more.

[todor-a]

After some more tinkering I found out I can test with the sass cli itself - used it like this:

sass ./src/index.scss --pkg-importer=node

It was failing with an error, saying that it can resolve the root scss file but was instead resolving to the root js file. I played around a bit more with the exports of the shared package and ended up at:

{
  "types": "build/index.d.ts",
  "main": "build/index.js",
  "import": "build/index.js",
  "require": "build/index.umd.js",
  "sass": "design-system/_index.scss",
  "style": "build/style.scss",
}

Not sure what exactly fixed it but this is enough to be able to transform the index.scss with the sass cli.

However, I still struggle to get it to work with the modern sass compiler in vite. After reverting to the legacy compiler:

import { NodePackageImporter } from 'sass-embedded';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        pkgImporter: new NodePackageImporter()
      },
  }
});

The transformation is successful. In short, I couldn't get the modern compiler to work with NodePackageImporter.

Should I open a bug @hi-ogawa?

[hi-ogawa]

@todor-a I made a example here https://github.com/hi-ogawa/reproductions/tree/main/vite-17948-sass-NodePackageImporter. The correct configuration looks like this

import { defineConfig } from "vite";
import { NodePackageImporter } from "sass-embedded";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
        importers: [new NodePackageImporter()],
      },
    },
  },
});

I should've pointed out this earlier, but as explained in https://vitejs.dev/config/shared-options.html#css-preprocessoroptions, supported options for "legacy" and "modern" are slightly different.

[todor-a]

Thank you.

[aholland]

Thank you @todor-a and @hi-ogawa, including for the link to here at #16438 (comment).

Update: it seems that it is no longer necessary to specify api:modern-compiler and NodePackageImporter can also be imported from 'sass' ie the JavaScript Sass implementation. I am using This vite/6.0.7 darwin-arm64 node-v22.8.0 and "sass": "1.83.4".

This works for me:

import { defineConfig } from 'vite';
import { NodePackageImporter } from 'sass';

export default defineConfig({
  css: { preprocessorOptions: { scss: { importers: [new NodePackageImporter()] } } }
});

To be totally precise in case someone struggles to reproduce this, I should say that my actual config includes SvelteKit, with "@sveltejs/vite-plugin-svelte": "5.0.3"

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { NodePackageImporter } from 'sass';

export default defineConfig({
  plugins: [sveltekit()],
  css: { preprocessorOptions: { scss: { importers: [new NodePackageImporter()] } } }
});