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 Dicky Alnatara •

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
 
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
 
elwiski profile image
elwiski •

Eres mi Dios. Gracias

Collapse
 
raalzz profile image
Raalzz •

Thanks this helped...🚀

Collapse
 
tuannguyenminh profile image
Minh Tuan Nguyen •

Doesn't help.

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

Collapse
 
waioz profile image
waioz •

This is works for me.

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

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?