Npm Пакеты, поля экспорта не работали как надо с SASS

Question

Я пытаюсь создать пакет, используемый только для хранения некоторых .scss файлов (таких как переменные, mixins и т. Д. c ..) и возможности импортировать их из других проектов.

S CSS упаковка:

упаковка. json

{
  "name": "@mycorp/example-scss-pkg",
  "version": "0.1.3",
  "description": "Example of SCSS Example Package.",
  "type": "module",
  "main": "src/index.scss",
  "exports": "./src/index.scss"
}

. / Src / index.s css

@import 'variables';

. / Src / variables.s css

$primary-color: #ff742a;

---

root -проекты, которые будут его использовать

Я использую webpack и babel для передачи кода:

webpack.config. js CSS part

  /* ... */
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // SASS ?
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
  /* ... */

И, наконец, мой Foo Компонент:

. / Src / components / foo. js

Простой компонент React, который просто импортировать файл S CSS.

import './foo.scss';

export default () => <div className="foo">Foo</div>

. / src / components / foo.s css

@import '@mycorp/example-scss-pkg';

.foo {
  background: $primary-color;
}

---

Проблема

Хорошо, сначала все должно работать нормально, но когда я запускаю сервер, я получаю сообщение об ошибке: SassError: File to import not found or unreadable: @mycorp/example-scss-pkg.

Но это работает хорошо, если я импортирую его с @import '@mycorp/example-scss-pkg/src/index.scss';

Так Я пытался использовать несколько экспортов для файла package.json:

  "exports": {
    ".": "./src/index.scss",
    "./variables": "./src/variables.scss",
    "./mixins": "./src/mixins.scss"
  },

Но все равно получала ту же ошибку при попытке @import '@mycorp/example-scss-pkg'.

И теперь экспорт не работает:
@import '@mycorp/example-scss-pkg/variables';
Дайте мне: SassError: File to import not found or unreadable: @mycorp/example-scss-pkg/variables.

Но @import '@mycorp/example-scss-pkg/src/variables.scss'; работает нормально ..

---

Обновление

Я также пытался экспортировать с помощью .scss (чтобы можно было перехватить его с помощью Webpack):

exports: {
    "./variables.scss": "./src/variables.scss",
}

И импортировать так: @import '@mycorp/example-scss-pkg/variables.scss';
Но все равно появилась ошибка: SassError: File to import not found or unreadable: @mycorp/example-scss-pkg/variables.scss.