The simple way to use Scoped and Global SCSS in Next.js

#nextjs #react #scopedscss #javascript

When I started working with next.js I had difficulties with styling components. Although it has a default way of styling called CSS in JS, I preferer Create React App approach. When you can write SASS/SCSS styles in separate files and scope it to the file or make it global.

The main problem was that the default next-sass package allowed only to use ether scoped styles or global. There wasn’t a simple way how to use it them both.
So after some research and development, I figure out how to make it work with both of them. So I want to share with you how to make it, so you can save some of your time.

Warning!

This method doesn't work with the latest next.js updates.I recommend using the approach in this comment https://dev.to/vladymyrpylypchatin/comment/m7fg

High-Level Overview

First of all, we will need to install next-sass and node-sass packages in our project. Then we will need to write the custom configuration for webpack in the next.config.js to make these packages working as we want.
After these steps, you will be able to just use import styles from component.scss to make scoped to component styles. Or import filname.global.scss to use global styles into a component.
Let’s take a look at the details.

Install dependencies

Run these commands to install packages @zeit/next-sass and node-sass.

npm install --save @zeit/next-sass node-sass


yarn add @zeit/next-sass node-sass

Setup next.js configuration

First, you need to create a file next.config.js It is a predefined name so this file should have exactly this name otherwise it won’t work. next.config.js is a file where we can configure our next.js application and tweak default webpack configs.
Paste this code into your next.config.js, save it and restart your development server.

const withSass = require('@zeit/next-sass');
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2,
  },
  webpack: config => {
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('.scss')) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return { loader: useRule };
          }
          if (useRule.loader === 'css-loader') {
            return {
              oneOf: [
                {
                  test: new RegExp('.global.scss$'),
                  loader: useRule.loader,
                  options: {},
                },
                {
                  loader: useRule.loader,
                  options: { modules: true }
                },
              ],
            };
          }
          return useRule;
        });
        delete rule.use;
      }
    });
    return config;
  },
});

How to use

Scoped styles

To use scoped styles just create a file *.scssand import it to a react component. The imported variable will store an object with style’s class names mapped to its hash versions.
Component.scss

.someScssClass {
    height: 100px;
    backgrond: red;
    ...
}

Component.jsx

import React from 'react';
import styles from './Component.scss';
const Component = () => {
    return (
        <div className={styles.someScssClass}>
        ...
    </div>
    );
};

Global styles

To make global styles you need to create a file with this name convention *.global.scss and import it to the React component.

styles.global.scss

.globalClass{
    ...
}

Component.jsx

import React from 'react';
import '../{path}/styles.global.scss';
const Component = () => {
    return (
        <div className="globalClass"}>
       ...
    </div>
    );
};

That’s it. Now you can easily use both global and local SCSS styles in your project. I hope this tutorial saved you some time.
I am a freelance software engineer who loves to develop web and mobile applications, sass. Subscribe to get insights and lessons learned while building my freelance business and SasS projects :)

JavaScript
Nextjs
React
Web App Development

Top comments (10)

Aldi • Feb 11 '20

Hello, i got error when add this to next.config.js
Said this :
TypeError: Cannot read property 'toString' of undefined
at /Applications/XAMPP/xamppfiles/htdocs/esteh/academy-landing/next.config.js:9:21

Why is there are error?

thanks

VladymyrPylypchatin • Mar 4 '20

This happens after the next.js update. I recommend using the package @webdeb/next-styles. It makes using scoped *.scss files as simple as in CRA.

The example of the next.config.js using this package:

// next.config.js
const withStyles = require('@webdeb/next-styles')

module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
})

I hope this will help you :)