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?

Betweenwhiles

Answer 1

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

Wend

I got "SassError: Can't find stylesheet to import." – Custumal

I changed 'main.scss' to 'variable.scss' and then it works. – Custumal

This answer worked for me. To add a little more info in how to make this work for you, you also need to have the main.scss file at the same directory level as your next.config.js file – Mighell

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

Fob

Hi Sergey, would you mind adding in how you set it up for tsconfig? I've tried adding it the way it's typed above but it looks like tsconfig wants us to add quotes to each property name and object name. – Dying

hi, i updated post, in tsconfig need add only alias for styles folder – Fob

Hi Sergey, This still gives me the following error: ``` error - ./scss/_variables.scss Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: nextjs.org/docs/messages/css-global ``` – Manducate

in variables.scss file should be only scss variables, mixins or functions. Selectors not available because it includes to all scss files. .module.scss too – Fob

Answer 3

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

Functionalism

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.

Baalbeer

Worked for me, thanks! I had a .scss file which was imported in many .js files from before we migrated to next.js. I just had to change the file name from variables.scss to variables.module.css to allow it to be imported in components. – Duleba

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

Menton