How to install scss in next js ?
Answered
Scaly-naped Pigeon posted this in #help-forum
Scaly-naped PigeonOP
I have a question , how can I install scss into next js after installing npm i sass ?
I made an index.scss file and then I imported it inside _app.js and then I configured it like this in next.config.js but it doesn't work
am i doing something wrong ?
Inside index.scss I have this
I made an index.scss file and then I imported it inside _app.js and then I configured it like this in next.config.js but it doesn't work
const nextConfig = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
additionalData: '@import "./index.scss";',
},
}am i doing something wrong ?
Inside index.scss I have this
@import url('./base.scss');
@import url('./globals.scss');
@import url('./header.scss');
@import url('./home.scss');Answered by Morgan
This article recommends the CSS imports: https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/#step-2-importing-sass-files-into-a-next-js-app so it must work
50 Replies
show your _app
Scaly-naped PigeonOP
this is my _app but i always get error for importing index.scss , also if i removed it the index.scss never gets imported
you arent using the scss anywhere
Scaly-naped PigeonOP
I imported it inside next.config.js , also inside _app
the docs clearly show you need to apply the css into the component
Scaly-naped PigeonOP
can I just do index.scss and just import every scss file inside it and then import only the index.scss ? something like this
i am pretty sure you need to use a plugin to roll up the scss if you do that
i know you need to with other css types
Try it
Scaly-naped PigeonOP
yea I am trying, because keep importing scss files will be alot of work when it comes to a big app , wanted to do the simple ways ^^
I did but it didn't work , i am trying right now to find a way
then use tailwind 😉
Scaly-naped PigeonOP
yea I may use tailwind on some stuff , but I write faster css code than tailwind because I have 3 years on writing css and only 4 months on tailwind 🤣🤣
i use postCSS with tailwind to rollup
but… dont know how that works with scss
This article recommends the CSS imports: https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/#step-2-importing-sass-files-into-a-next-js-app so it must work
Answer
Just try something simple, import 1 file that imports another
Scaly-naped PigeonOP
I always use css in all of my projects but in big project i use scss but its my first time using it with next js
will try that and tell you if it works
Ok. I use PostCSS and PostCSS mixins.
Love it.
glad that worked!
All you need is PostCSS config
… i… i know? 😆
did you mean to reply to op?
No, you replied to me, so I also replied 🤣
oh shit.
i did
Scaly-naped PigeonOP
this is working , I changed scss files with _base.scss etc
@import 'base';
@import 'global';
@import 'header';
@import 'home';
this is working
@import 'base';
@import 'global';
@import 'header';
@import 'home';
this is working
failure for cajun
It’s like inception
Brilliant!
Scaly-naped PigeonOP
renaming files with _ and then import it like above works fine ^^
so postcss was the answer?
^ this is technically the answer then. just also mentions tailwind
Scaly-naped PigeonOP
I really like the _ thing and then call it inside index.scss , this saves alot of imports in the future and it will give the ability to do light mode / dark mode more easily ^^
The problem was the way the imports were done. The article I shared cleared that up I think.
sounds good to me!
Scaly-naped PigeonOP
this article should be posted on next js docs It covers the way , how people should imports scss into a single file
is there anyway to recommend this to next js team stuff ?
I would open a PR and add some additional info perhaps in one of the docs pages for the SCSS setup.
Scaly-naped PigeonOP
yup that would be very helpful for other users to know about this trick
sounds like the headline of clickbait
JUST USE THIS ONE EASY TRICK FOR PERFECT SCSS