reactjs - Hur kan jag skapa ett globalt stylesheet för att dela scss-variabler i ett Nx React-projekt?

Nu hoppas jag verkligen att detta inte är alltför åsiktsbaserat. Men jag skulle verkligen vilja höra några råd eftersom jag inte har någon aning om hur jag ska börja med detta.

Jag har ett grundläggande Nx-arbetsutrymme med en TypeScript React-frontend kombinerad med SCSS-stilar. Projektets arkitektur ser ungefär ut så här:

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

Finns det något smart sätt att importera global.scss till vilken tillgänglig (=samma mappnivå eller under) komponent som helst i /libs? För att ge ett exempel:
Föreställ dig att jag har deklarerat $example: #fff; i global.scss. Hur skulle jag använda det i someLib1.scss utan att importera det via den absoluta sökvägen (@import/@use "../../../shared/styles/global.scss" eller @import/@use "/libs/shared/styles/global.scss")?

Svar #1

Till slut kom jag på följande lösning:

Jag lade till en anpassad webpack.config.js-fil i mitt arbetsutrymme och utökade på sätt och vis den ursprungliga konfigurationen som levererades av Nx med ett alias för global.scss-filen.

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

Efter att ha gjort det kunde jag importera global.scss i varje .scss-fil i libs med aliaset på följande sätt:

@import "global";

Relaterade artiklar