Leveraging Global SCSS Variables in Next.JS with SASS

Question

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss 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 global file work perfectly.

I also have modular SCSS files attached to components, using the naming convention [component].module.scss.

In one of the files that I import into main.scss, specifically variables.scss, I have defined a variable.

variables.scss

$mobile: 750px;

main.scss

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

However, when I attempt to use this variable in one of my modular CSS files, I encounter 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 concern is, why are the global variables I declare in my main.scss file not being recognized?

css reactjs sass next.js

Answer 1

Answer №1

To implement this feature, simply insert the following code snippet into your next.config.js file and then restart your application:

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

Answer 2

To implement this feature, simply insert the following code snippet into your next.config.js file and then restart your application:

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

Answer 3

Answer №2

One convenient method is to include a file with variable import and set an alias in tsconfig

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

Update:

To implement this, add the following code to next.config.js (create the file if it doesn't exist)

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

Additionally, make sure to add an alias in tsconfig.json

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

Finally, create a file at the path: src/styles/variable.scss. In variable.scss, you can then import other scss files.

Answer 4

One convenient method is to include a file with variable import and set an alias in tsconfig

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

Update:

To implement this, add the following code to next.config.js (create the file if it doesn't exist)

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

Additionally, make sure to add an alias in tsconfig.json

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

Finally, create a file at the path: src/styles/variable.scss. In variable.scss, you can then import other scss files.

Answer 5

Answer №3

Although this issue is not specific to Next.js, it actually pertains to the functionality of sass-loader. Whenever a scss file is imported into a js file, it creates an isolated environment for Sass, meaning that there are no truly "global variables."

As a result, you must ensure that the variables.scss file is imported into every scss file that utilizes any of the variables.

Important side note: It's crucial that shared scss files (such as your variables.scss) do not contain regular CSS styles, as this would lead to unnecessary duplication with each import.

Answer 6

Although this issue is not specific to Next.js, it actually pertains to the functionality of sass-loader. Whenever a scss file is imported into a js file, it creates an isolated environment for Sass, meaning that there are no truly "global variables."

As a result, you must ensure that the variables.scss file is imported into every scss file that utilizes any of the variables.

Important side note: It's crucial that shared scss files (such as your variables.scss) do not contain regular CSS styles, as this would lead to unnecessary duplication with each import.

Answer 7

Answer №4

It seems that importing variables from a module file is the way to go, rather than a global file.

Start by importing variables.scss into your module's SCSS file and then proceed to import your variables:

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 approach has proven successful for me.

Answer 8

It seems that importing variables from a module file is the way to go, rather than a global file.

Start by importing variables.scss into your module's SCSS file and then proceed to import your variables:

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 approach has proven successful for me.

Answer 9

Answer №5

To overcome this issue, I found a workaround by including my global variables in next.config.js. While it may not be the most ideal solution, it does get the job done.

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;
  `,

  },
};

If you're interested, you can check out further details at: https://github.com/vercel/next.js/pull/12277

Answer 10

To overcome this issue, I found a workaround by including my global variables in next.config.js. While it may not be the most ideal solution, it does get the job done.

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;
  `,

  },
};

If you're interested, you can check out further details at: https://github.com/vercel/next.js/pull/12277

Leveraging Global SCSS Variables in Next.JS with SASS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error with Hydration Caused by Conditional Rendering in Client-Side Component

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

Guide on setting up redux store from server component using next.js and app router

varying heights in bootstrap columns

Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

ReactJS encountered an error: Module Build failed due to a SyntaxError caused by an unexpected token '<'

The correct way to use the useState hook for implementing an icon in React

Error: Unable to modify the value of a protected property '0' in the object 'Array'

Creating an Android application that integrates HTML styling efficiently

Positioning the image to appear behind the Canvas

Ways to quickly change a class when clicking (without waiting for mouse button release)

The paths of youngsters and the application of conditional styling

Creating a scrolling sidebar in Bootstrap 4

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Scrolling animations do not support the Translate3d feature

Launch a Next.JS web application utilizing Yarn on Google App Engine

changing the elements' classes by using a carousel

What is the process for using preventDefault on an event when the element id is provided as the argument?