DEV Community

Cover image for The Simplest Way To CONFIGURE NEXT.JS With SASS
Harvey Jones
Harvey Jones

Posted on

16 9

The Simplest Way To CONFIGURE NEXT.JS With SASS

Styling is a core part of designing application pages. Whenever I start working on Next.js, I usually find myself wasting some time googling how to configure SCSS in my project. So, in order to save your precious time, I have decided to pen down this issue as a reference.

Although Next.js offers a really sophisticated plugin next-sass for compiling sass files but this plugin fails to parse .eot and .woff files. So for parsing all our sass and font files, we have to add custom Webpack configuration inside next-sass.

Next-sass compiled stylesheet to .next/static/css. Next.js will automatically add the CSS to your HTML files.

Step 1: Install Dependencies

Let’s start by installing dependencies.

First, we need to install next-sass.

`npm install --save @zeit/next-sass`
Enter fullscreen mode Exit fullscreen mode

Next-sass plugin used node sass so we have to install node-sass as well.

 `npm install --save @zeit/node-sass`
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the Next Config File

Now, create the next.config.js file in the root of your project directory. Next.js automatically reads all configurations from this file. So you just need to add the configurations here and export them.

Step 3: Add Customize the Configuration

Now, We have to add customized configuration inside next-sass to make it work fully and functional for compiling SASS and font files.

This configuration is capable of parsing following file types:
Sass and css files
Font files (.eot, .woff, .woff2)
Image files (.png, jpg, .gif, .svg)

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
   webpack (config, options) {
       config.module.rules.push({
           test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
           use: {
               loader: 'url-loader',
               options: {
                   limit: 100000
               }
           }
       });

       return config;
   }
}));
Enter fullscreen mode Exit fullscreen mode

Great! You now have sass configured and I now have my permanent reference. Cheers!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (13)

Collapse
 
jessetinell profile image
Jesse Tinell β€’

Package @zeit/node-sass doesn't seem to exist. Guess it should be just "node-sass" :)

Collapse
 
karthik6345 profile image
Karthik6345 β€’ β€’ Edited

why is nested SCSS not working?
.loginForm{
width:300px;

.MuiFormControl-root{
  width:100%;
  margin-top:20px;
}
Enter fullscreen mode Exit fullscreen mode

}

Collapse
 
wildansupernova profile image
Wildan β€’

how to add config css modules ?

Collapse
 
pushpankdhruw profile image
⚑️ Pushpank Dhruw β€’

You Can just Add

// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})

Collapse
 
philthibeault profile image
Phil β€’

My hero! Been tinkering with this for quite some time, thanks for saving my sanity!

Collapse
 
macorifice profile image
Stefano β€’

thank you very much, you saved my life!!!!

Collapse
 
_aquasar profile image
Alex Quasar β€’

Thanks but a little more explanation would be nice, like why is different than the vanilla configuration in the docs and what is url-loader and limit doing?

Collapse
 
libasoles profile image
Guillermo PΓ©rez Farquharson β€’

However, sass is not modular. Is it?

Doing this in any scss file will affect the entire document:

div {
background: red
}

Collapse
 
weider86 profile image
Weider Lima β€’

Thanks guy!

Collapse
 
raalzz profile image
Raalzz β€’

Thanks this helped...πŸš€

Collapse
 
waioz profile image
waioz β€’

This is works for me.

sudo npm install --save-dev --unsafe-perm node-sass

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay