From the course: Learning Next.js
Join today to access over 23,200 courses taught by industry experts.
Using scoped CSS with CSS modules
From the course: Learning Next.js
Using scoped CSS with CSS modules
- [Instructor] Next.js supports another way to apply CSS, and this time it is component-level CSS, meaning that this is specific to one component in order to use CSS and target one component only. In the same location, in directory styles, we're going to use the file module.css. The naming convention with each CSS file is ending with module.css, and you just need to replace the first segment with the name of the targeted component. Let's go back to the code editor, and we're going to find the example with Home.module.css that you're going to find within the styles directory, and you see that for the naming convention. So it starts with the name of the component and ending with module.css, and it already comes with some initial settings, and as you may guess, this one applies to the homepage with the same name component, and we add this module.css to the scope of this file, and it is imported as an object. So we can apply…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.