Next.JS: Using SASS variables from global scss - css

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

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 2

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 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";`
}
}

Answer 4

Apparently you can only import variables from a module file, not a global file.
Import variables.scss into your module's SCSS file, then import your variables from your module:
variables.scss:
$my-color = #123456;
:export {
myColor: $my-color;
}
page.module.scss:
#import './variables.scss';
page.jsx:
import color from './page.module.scss'
console.log(color.myColor); // '#123456'
This worked for me.

Answer 5

I solve it by adding my global variables to next.config.js. It is not a good solution but it works.
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
prependData: `
$primary-font-regular: 'Gotham';
$primary-font-medium: 'Gotham';
$default-font-size: 16px;
$h1: 5.208vw;
$h4: 1.458vw;
$primary-color: #000000;
$gray: #CCCCCC;
`,
},
};
You can follow this link for the answer: https://github.com/vercel/next.js/pull/12277