Next.js: Utiliser des variables Sass de Global SCSS

Question

J'ai une application NEXT.JS avec un main.scss Fichier CSS global importé dans le pages/_app.js fichier.

( _ app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Les styles de ce fichier fonctionnent.

J'ai également des fichiers SCSS modulaires connectés aux composants, à l'aide de [composant] .MODULE.SCSS.

J'ai écrit une variable dans mon variables.scss Fichier, l'un des fichiers que j'ai @import dans main.scss,

(( variables.scss

$mobile: 750px;

( principaux.scss

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

Cependant, lorsque j'essaie d'utiliser cette variable dans un CSS modulaire, je reçois une erreur

./module-styles/navbar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./module-styles/navbar.module.scss)
SassError: Undefined variable: "$mobile".
        on line 19 of /Users/Parv/Documents/reactx/module-styles/navbar.module.scss
>>         @media (max-width: $mobile) {

   ---------------------------^

Ma question est de savoir pourquoi mes variables mondiales que je déclare dans mes principales.

Answer 1

le moyen plus facile d'ajouter un fichier avec une importation variable et d'ajouter un alias à TSCONFIG

sassOptions: {
    includePaths: ['./src'],
    prependData: `@import "~@styles/variable.scss";`,
}