Next.JS: Using SASS variables from global scss

user_12943421 0
Viewed 20798

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?

next.js reactjs sass css
5 Answers

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

user_63718270

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

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

user_65393170

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

user_74173420

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.

user_22264570
Related