Next.js Practical Introduction: Styling and Theming

Blog Discussions
, ,
1

In this tutorial series, you’ll be provided with a practical introduction to how Next.js can help you build web applications.

Part 2: Styling and Theming

Brought to you by @dan-auth0 :man_technologist:t2:

1176×1056 64.5 KB

1 Like
2

Let us know if you have any questions regarding that!

3

Hi team,
I am applied your strategies on my project, I implemented layout directory then created layout.js and want to import Layout.scss but it’s generating issue as:
index.js:1 ./components/layout/layout.scss
Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js.
Read more: css-global | Next.js
Location: components/layout/header.js

any idea how it will resolve?

4

Hey there @Akshay-pal!

I’m sure @dan-auth0 will be able to look at it once he’s online!

5

Howdy, Akshay! I can look into this some time this week. I wonder if it could be related to the version of Next.js that you are using. What version are you on?

6

@Akshay-pal try using SCSS modules. Current Next versions only allow you to import module styles into components. Check out this section of the Next.js docs on CSS Modules (and SCSS styles is right below that)

1 Like
7

Thank you for sharing this approach, Jonathan :muscle: Akshay, let me know if that works, please :slight_smile: