If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇
What will you learn?
Creating a Global Stylesheet in Next.js
Import styles from node_modules
Create Component-Level CSS
Sass support
CSS in JS
1. Creating a Global Stylesheet in Next.js
Create a stylesheet named style.css and then add the below snippets
These styles (style.css) will apply to all pages and components in your application. Due to the global nature of stylesheets, and to avoid conflicts open pages/index.js and then import the css like below
In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them — meaning you can keep application state.
In production, all CSS files will be automatically concatenated into a single minified .css file.
2. Import styles from node_modules
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.
For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/index.js. For example:
3. Create Component-Level CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
This behavior makes CSS Modules the ideal way to include component-level CSS. CSS Module files can be imported anywhere in your application.
Create a new component level css like below by creating a button component and then the css for it like Button.js and Button.module.css
Here you can see the component level css that is been imported to the Button.js file
CSS Modules are an optional feature and are only enabled for files with the .module.css extension. Regular stylesheets and global CSS files are still supported.
In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
4. Sass Support
Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.
Before you can use Next.js’ built-in Sass support, be sure to install sass:
npm install --save-dev sass
Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
Customizing Sass Options
If you want to configure the Sass compiler you can do so by using sassOptions in next.config.js.
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
Sass Variables
Next.js supports Sass variables exported from CSS Module files.
For example, using the exported primaryColor Sass variable:
$primary-color: #64FF00
:export {
primaryColor: $primary-color
}
import variables from '../styles/variables.module.scss'
export default function MyApp({ Component, pageProps }) {
return (
<Layout color={variables.primaryColor}>
<Component {...pageProps} />
</Layout>
)
}
5. CSS-in-JS
It’s possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
function HiThere() {
return <p style={{ color: 'red' }}>hi there</p>
}
export default HiThere
Next.js will bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support “shadow CSS” similar to Web Components, which unfortunately do not support server-rendering and are JS-only.
Congratulations!
