[Bug]: Cannot import tokens from @fluentui/react-theme-sass

[miroslavstastny]

Library

React Components / v9 (@fluentui/react-components)

System Info

-

Are you reporting Accessibility issue?

no

Reproduction

Bug Description

In App.scss, import tokens:

@import "~@fluentui/react-theme-sass";

Build fails:

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[miroslavstastny]

This is caused by package exports in package.json:

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./lib/index.js",
      "require": "./lib-commonjs/index.js",
    },
    "./package.json": "./package.json"
  }

When I remove the exports completely, or add a nonsense entry to "." which points to sass/tokens.scss, it starts to work.