Nextjs
Published in

Nextjs

#Next.js

How To Add CSS In Next.js?

Easy Ways Add CSS in Next.js #SeriesPart2 💕

In this Next Series, we Learn How to add CSS Projects with Easy Steps.

Good News is that Next.js provides custom CSS functionality. You Use The next.js plugin inside your project and use it.

Add CSS in Next.js #SeriesPart2 💕

New Update:

Next.js Version 9.3 Support CSS Global Stylesheets. Now you add CSS directly Import .css files as global stylesheets.

import './style.css'

Next.js Version 9.3 Support CSS Module for Component-Level Styles Now You Add import CSS use .module.css for local scope

import style from 'style.module.css'

Go To Github Download or Use Npm:

npm install --save @zeit/next-cssoryarn add @zeit/next-css

Create a next.config.js in the root of your project.

Default:

default config use for import CSS Global stylesheet in custom _app.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS({})

Custom:

Custom config is used to import CSS in other Components like header and footer.

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: true // After true than use import statement in next.js
})

How To add Global CSS:

When you install and create an app, use this npm command.

npx create-next-app myapp
# or
yarn create next-app myapp

In that case, the global custom _app.js creates by default in your project; otherwise, you create Global in your project to import your Global CSS file in next.js.

import '../styles.css'
or
import '../styles.scss'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

Demo:

Get Source Code

About Me

My Name is Rajdeep Singh. I’m a Front-end Developer, blogger, and A student in BioTechNology in Medical Science.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/