Next.JS: Using SASS variables from global scss

Question

I have a Next.js Application with a main.scss global css file imported in the pages/_app.js file.

_app.js

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

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

The styles from this file work.

I also have some modular scss files attached to components, using [component].module.scss.

I have written a variable in my variables.scss file, one of the files which I @import in main.scss,

variables.scss

$mobile: 750px;

main.scss

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

However, when I try to use this variable in one my modular css, I get an error

./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) {

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

My question is, why aren't my global variables which I declare in my main.scss coming through?

Answer 1

It is not related to Next.js, but to the way sass-loader works. Each import of scss file from js file is treated as an isolated sass env, therefore, there is no such thing "global variables".

This behaviour requires you to import the variables.scss file from each scss file that uses one of the variables.

Side note, It is important that these common scss files (such your variables.scss) will not contain "regular" css, because if so, they will be duplicated many times (the amount of imports).

Answer 2

the easier way is to add a file with variable import and add alias to tsconfig

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

Update:

In file next.config.js need add this code (you need to create it if there is no such file)

module.exports = (phase, {defaultConfig}) => {
    if ('sassOptions' in defaultConfig) {
        defaultConfig['sassOptions'] = {
            includePaths: ['./src'],
            prependData: `@import "~@styles/variables.scss";`,
        }
    }
    return defaultConfig;
}

In file tsconfig.json need add alias

"baseUrl": ".",
"paths": {
    ...
    "@styles/*": [
        "src/styles/*"
    ],
    ...

Then create file with styles on path: src/styles/variable.scss in variable.scss you can import other scss file

Answer 3

Just add this to your next.config.js file and restart

const path = require('path')
    
    module.exports = {
        sassOptions: {
          includePaths: [path.join(__dirname, 'styles')],
          prependData: `@import "main.scss";`
        }
    }