如何创建全局样式表以在 Nx React 项目中共享 scss 变量？

现在，我真的希望这不是太基于意见。但我只是想在这里提供一些建议，因为我不知道如何开始。

我有一个基本的Nx https://nx.dev/带有 TypeScript React 前端的工作区SCSS https://sass-lang.com/风格。 该项目的架构看起来是这样的：

root/
├─ apps/
├─ libs/
│  ├─ someLib1/
│  │  ├─ src/
│  │  │  ├─ lib/
│  │  │  │  ├─ someLib1.tsx
│  │  │  │  ├─ someLib1.scss
│  ├─ someLib2/
│  ├─ someLib3/
│  ├─ shared/
│  │  ├─ styles/
│  │  │  ├─ global.scss

有什么聪明的方法可以导入global.scss进入任何可访问的（=相同文件夹级别或以下）组件/libs？举个例子：
想象一下我已经宣布$example: #fff; in global.scss。我将如何使用它someLib1.scss不通过绝对路径导入它（@import/@use "../../../shared/styles/global.scss" or @import/@use "/libs/shared/styles/global.scss")?

最终我想出了以下解决方案：

我添加了一个自定义webpack.config.js文件到我的工作区并扩展了由Nx https://nx.dev/别名为global.scss file.

const path = require('path');
const nrwlConfig = require('@nrwl/react/plugins/webpack.js');

module.exports = (config) => {
  nrwlConfig(config);

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'global': path.join(
          __dirname,
          'libs/shared/styles/global.scss'
        ),
      },
    },
  };
};

这样做之后我能够导入global.scss在每一个.scss通过别名在 libs 中创建文件，如下所示：

@import "global";