Support for SASS nodeJS package importer

[kkesidis]

Describe the bug

I am making a generic app that that offers both a SASS and a CSS stylesheet to users, so they can use whichever suits their needs. However, there is an issue with the import of node packages.

SASS now has the --pkg-importer=node option that allows it to load dependencies using the Node.js module resolution algorithm. Using this CLI option i can import a path that is defined on the package.json "export".

@use "pkg:path/to/file.scss"

However, the above does not work in the context of a node app. With that, i mean that if we try to import the .scss containing the above code in a main.js file, we'll get:

Error: Can't find stylesheet to import.

I checked the documentation but couldn't find a way to configure this or add the SASS importer as seen on the sass example.

I would expect that we can use the supported pkg: prefix to both build the SASS/SCSS file to css and serve a node app using that same code, or at least be able to configure the css options to enable that support.

Note: I understand that bootstrap does not have an "exports" property in their package.json. I used it for a simple example, the behavior is the same with packages that define "export".

Reproduction

https://github.com/kkesidis/vite-sass-pkg-prefix

Steps to reproduce

1. Run yarn build:scss to build the css file. This will succed.
2. Run `yarn build" to build the app (which also imports the scss file)

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 2600X Six-Core Processor
    Memory: 11.26 GB / 12.43 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4
    vite: ^5.2.0 => 5.2.9

Used Package Manager

yarn

Logs

No response

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.

[sapphi-red]

Vite still uses the legacy API and NodePackageImporter only supports the modern API (#7116). If we migrate to the modern API, it would be possible to use it:

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

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

[kkesidis]

Thank you very much for the response, @sapphi-red. I'll subscribe to the relevant issue. Closing this now, then

[hi-ogawa]

For anyone looking into using NodePackageImporter for now available sass modern api on Vite, I made an example here https://github.com/hi-ogawa/reproductions/tree/main/vite-17948-sass-NodePackageImporter. Note that the configuration is slightly different from #16438 (comment)

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

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

related discussion #17948