DEV Community

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

The Simplest Way To CONFIGURE NEXT.JS With SASS

Harvey Jones on June 11, 2019

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

Collapse
 
elwiski profile image
elwiski

Eres mi Dios. Gracias

Collapse
 
tuannguyenminh profile image
Minh Tuan Nguyen

Doesn't help.

"Module not found: Can't resolve " when I import scss file to component