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

Question

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

\n

我有一个基本的Nx工作区，其中包含 TypeScript React 前端和SCSS样式。\n该项目的架构如下所示：

\n

root/\n\xe2\x94\x9c\xe2\x94\x80 apps/\n\xe2\x94\x9c\xe2\x94\x80 libs/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 someLib1/\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 src/\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 lib/\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 someLib1.tsx\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 someLib1.scss\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 someLib2/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 someLib3/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 shared/\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 styles/\n\xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 global.scss\n

\n

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

\n

Answer 1

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

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

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

@import "global";