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

Question

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

我有一个基本的 Nx workspace with a TypeScript React frontend combined with SCSS 样式。该项目的架构看起来是这样的：

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

有什么巧妙的方法可以将 global.scss 导入 /libs 中的任何可访问（=相同文件夹级别或以下）组件？举个例子：
假设我在 global.scss 中声明了 $example: #fff;。如果不通过绝对路径（@import/@use "../../../shared/styles/global.scss" 或 @import/@use "/libs/shared/styles/global.scss"）导入它，我将如何在 someLib1.scss 中使用它？

Answer 1

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

我向我的工作区添加了一个自定义 webpack.config.js 文件，并使用 global.scss 文件的别名扩展了 Nx 提供的初始配置。

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'
        ),
      },
    },
  };
};

这样做之后，我可以通过别名在库中的每个 .scss 文件中导入 global.scss，如下所示：

@import "global";

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

How can I create a global stylesheet to share scss variables in a Nx React project?

architecture

sass

typescript

reactjs

nrwl-nx