How to install scss in next js ?

Answered

Scaly-naped Pigeon posted this in #help-forum

Scaly-naped PigeonOP

2023-09-23T18:31:18.000Z

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

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

View full answer

50 Replies

@Scaly-naped Pigeon 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 `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');`

DirtyCajunRice | AppDir

2023-09-23T18:37:50.000Z

show your _app

@DirtyCajunRice | AppDir show your _app

Scaly-naped PigeonOP

2023-09-23T18:46:34.000Z

this is my _app but i always get error for importing index.scss , also if i removed it the index.scss never gets imported

DirtyCajunRice | AppDir

2023-09-23T18:47:00.000Z

you arent using the scss anywhere

@DirtyCajunRice | AppDir you arent using the scss anywhere

Scaly-naped PigeonOP

2023-09-23T18:47:22.000Z

I imported it inside next.config.js , also inside _app

@Scaly-naped Pigeon I imported it inside next.config.js , also inside _app

DirtyCajunRice | AppDir

2023-09-23T18:47:44.000Z

the docs clearly show you need to apply the css into the component

https://nextjs.org/docs/pages/building-your-application/styling/sass#sass-variables

@DirtyCajunRice | AppDir the docs clearly show you need to apply the css into the component

Scaly-naped PigeonOP

2023-09-23T18:49:00.000Z

can I just do index.scss and just import every scss file inside it and then import only the index.scss ? something like this

@Scaly-naped Pigeon can I just do index.scss and just import every scss file inside it and then import only the index.scss ? something like this

DirtyCajunRice | AppDir

2023-09-23T18:54:23.000Z

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

@Scaly-naped Pigeon can I just do index.scss and just import every scss file inside it and then import only the index.scss ? something like this

Morgan

2023-09-23T18:55:42.000Z

Try it

@DirtyCajunRice | AppDir i am pretty sure you need to use a plugin to roll up the scss if you do that

Scaly-naped PigeonOP

2023-09-23T18:57:51.000Z

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

@Morgan Try it

Scaly-naped PigeonOP

2023-09-23T18:58:06.000Z

I did but it didn't work , i am trying right now to find a way

@Scaly-naped Pigeon 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 ^^

DirtyCajunRice | AppDir

2023-09-23T18:58:08.000Z

then use tailwind ðŸ˜‰

@DirtyCajunRice | AppDir then use tailwind ðŸ˜‰

Scaly-naped PigeonOP

2023-09-23T19:00:14.000Z

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 ðŸ¤£ðŸ¤£

Morgan

2023-09-23T19:00:28.000Z

You could import every file in _app.js

If the css import syntax doesnâ€™t work.

Es 6 import

DirtyCajunRice | AppDir

2023-09-23T19:01:08.000Z

i use postCSS with tailwind to rollup

butâ€¦ dont know how that works with scss

Morgan

2023-09-23T19:02:44.000Z

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

Morgan

2023-09-23T19:03:18.000Z

Just try something simple, import 1 file that imports another

@DirtyCajunRice | AppDir i use postCSS with tailwind to rollup

Scaly-naped PigeonOP

2023-09-23T19:03:35.000Z

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

@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

Scaly-naped PigeonOP

2023-09-23T19:03:44.000Z

will try that and tell you if it works

Morgan

2023-09-23T19:04:06.000Z

Ok. I use PostCSS and PostCSS mixins.

Love it.

@Morgan Ok. I use PostCSS and PostCSS mixins.

DirtyCajunRice | AppDir

2023-09-23T19:07:38.000Z

glad that worked!

@DirtyCajunRice | AppDir glad that worked!

Morgan

2023-09-23T19:08:24.000Z

All you need is PostCSS config

@Morgan All you need is PostCSS config

DirtyCajunRice | AppDir

2023-09-23T19:08:53.000Z

â€¦ iâ€¦ i know? ðŸ˜†

did you mean to reply to op?

@DirtyCajunRice | AppDir did you mean to reply to op?

Morgan

2023-09-23T19:09:37.000Z

No, you replied to me, so I also replied ðŸ¤£

@DirtyCajunRice | AppDir glad that worked!

DirtyCajunRice | AppDir

2023-09-23T19:09:47.000Z

oh shit.

i did

@Morgan All you need is PostCSS config

Scaly-naped PigeonOP

2023-09-23T19:10:00.000Z

this is working , I changed scss files with _base.scss etc

@import 'base';
@import 'global';
@import 'header';
@import 'home';

this is working

DirtyCajunRice | AppDir

2023-09-23T19:10:00.000Z

failure for cajun

@DirtyCajunRice | AppDir failure for cajun

Morgan

2023-09-23T19:10:26.000Z

Itâ€™s like inception

@Scaly-naped Pigeon this is working , I changed scss files with _base.scss etc @import 'base'; @import 'global'; @import 'header'; @import 'home'; this is working

Morgan

2023-09-23T19:10:34.000Z

Brilliant!

Scaly-naped PigeonOP

2023-09-23T19:10:35.000Z

renaming files with _ and then import it like above works fine ^^

@Morgan Itâ€™s like inception

DirtyCajunRice | AppDir

2023-09-23T19:10:40.000Z

so postcss was the answer?

@DirtyCajunRice | AppDir i use postCSS with tailwind to rollup

DirtyCajunRice | AppDir

2023-09-23T19:11:14.000Z

^ this is technically the answer then. just also mentions tailwind

Scaly-naped PigeonOP

2023-09-23T19:12:26.000Z

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

@DirtyCajunRice | AppDir ^ this is technically the answer then. just also mentions tailwind

Morgan

2023-09-23T19:14:15.000Z

The problem was the way the imports were done. The article I shared cleared that up I think.

@Morgan The problem was the way the imports were done. The article I shared cleared that up I think.

DirtyCajunRice | AppDir

2023-09-23T19:15:14.000Z

sounds good to me!

Scaly-naped PigeonOP

2023-09-23T19:16:50.000Z

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 ?