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

Protecting the build directory while implementing actions/checkout@v2

"Discover the power of Next.js by utilizing dynamic routes from a curated list

What is the best way to incorporate my theme classes into my React component for custom styling?

Encountering browser freezing issues with a Next.JS app when trying to add an input field

Conceal virtual keyboard on mobile when in autocomplete box focus

What is the best way to display two items side by side from a list of items in HTML?

Unsuccessful response: An error was encountered with status code 400 in the new ApolloError

Is it compulsory for all pages to be built with react?

Queries cannot be invalidated if any of the URL parameters are modified

Enhancing create-react-app to handle .mjs files using webpack

Incorporating React build files into a version control system

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Tips for including multiple spaces within a cell of a table

Attempting to link various functions in my component consecutively

JavaScript opacity adjustments not achieving desired outcome

The Chakra UI Modal overlay consistently envelops the entire screen

What makes the nav class different from the navbar class in Bootstrap?

Customizing PrimeReact Styles

Webpack encounters difficulty resolving non-js `require`s located within node_modules

Google Bar Graphs Cannot Display Decimal Values