Can sass-loader understand package.json "exports" field?

[krutoo]

Hi, in my UI library i have some scss files. This library build from TS and SCSS files:

• JS files compiles from TS files from src folder to build folder
• CSS files just copies from src folder to build folder

In package.json of my library i have:

{
  "name": "@my-org/my-library",
  "exports": {
    "./utils.scss": "./build/utils.scss"
  },
}

In the project in which I use my library I tried imports:

@use "@my-org/my-library/utils";

// or
@use "@my-org/my-library/utils.scss";

// or
@use "node_modules/@my-org/my-library/utils";

// or
@use "node_modules/@my-org/my-library/utils.scss";

But it is not working, in this project i use sass-loader with rspack but it crashes with error:

Module build failed:
  ╰─▶   × Can't find stylesheet to import.
        │   ╷
        │ 1 │ @use '@my-org/my-library/colors';

Can sass-loader understand package.json "exports" field?

[alexander-akait]

Did you try it using webpack? Because yes, it should works

[alexander-akait]

What is

@use "@my-library/utils"

?

Sounds like you have @my-library org and utils package with exports. It means you should use @my-library/utils/utils.scss.

Also you can have default export:

"exports": {
    ".": "./build/utils.scss"
},

[krutoo]

@alexander-akait I apologize for the misleading, i updated code snippets

[krutoo]

@alexander-akait I create repo with demo:
https://github.com/krutoo/sass-loader-package-exports

Just make npm i and npm run dev in root folder

It doesn't matter whether there is an organization or not in package with scss exports

[alexander-akait]

Sorry for delay, there is an intresting problem... exports works fine, you have:

// @use "my-library/utils.scss"; // also not working

But it works fine, just uncomment it and check out.

Because import * as mod from "something.js" requires an extension, you need to write scss extension too for sass, i.e. @use "my-library/utils.scss";, theoretically you can make a small plugin that allow to use it without the scss extensions, but I don't feel it is a right solution, import ... from "something.js" and the exports field were originally designed to have an extension at the end and I have strong feel if sass wants to be align with javascript and don't create potential misunderstanding for developers we need to solve it or just improve sass documentation that recommends using the extension at the end.

@use "node_modules/my-library/utils.scss"; // not working
@use "node_modules/my-library/utils"; // also not working

Will not work, because the exports logic doesn't work in such case, you can test the same using JS

test.mjs

// import foo1 from "./node_modules/my-library/foo.js"; doesn't work
import foo2 from "my-library/foo.js"; // work

{
  "name": "my-library",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "exports": {
    "./utils.scss": "./src/utils.scss",
    "./foo.js": "./src/foo.js"
  }
}

@nex3 There's an interesting problem here, you might need to create RFC/discussion

[nex3]

This is handled by the package importer proposal, which looks for files that match exports using the same logic it looks for files on the filesystem (and so can handle resolving extensions, partials, and index files).

[krutoo]

@nex @alexander-akait This may be the wrong place to ask, but do you have any thoughts on how to properly define paths for the @use rule.

Currently we are using paths like @use "node_modules/@my-org/my-lib/utils" and skip extension because this was once a rule in the stylelint-config-sass-guidelines package

As i understand now we should definitely use the extension when scss file is provided by exports field

[alexander-akait]

As i understand now we should definitely use the extension when scss file is provided by exports field

I would say that this is a recommendation, you still may not specify this, but in order to be compatible with the exports field (and other JS logic) it is better to do it. Feel free to open an issue in stylelint-config-sass-guidelines and link this issue

[nex3]

The recommendation as soon as sass/sass#2739 is released (in the next few days) will be to write @use "pkg:@my-org/my-lib/utils".