# Next.js Series #2-CSS Support

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055240543/bf960a93-780f-4d13-860b-31e049707b98.png align="left")

### What will you learn?

1. Creating a Global Stylesheet in Next.js
    
2. Import styles from node\_modules
    
3. Create Component-Level CSS
    
4. Sass support
    
5. CSS in JS
    

### 1\. Creating a Global Stylesheet in Next.js

Create a stylesheet named style.css and then add the below snippets

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055242478/1f225b6c-7250-4152-a8c1-f966005d60c3.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055244270/6576a055-2de0-44b3-938e-1d0fca6e74c5.png align="left")

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055250275/e9bdf0e0-dcd3-4734-a23f-b3e971b594ec.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055252205/2dd2136f-bd30-4ff0-8216-92a32851528e.png align="left")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055254992/0e0ed3b7-d0bf-425e-82c3-0cee094e692e.png align="left")

#### Customizing Sass Options

If you want to configure the Sass compiler you can do so by using sassOptions in next.config.js.

```javascript
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:

```javascript
/* variables.module.scss */  
$primary-color: #64FF00  
  
:export {  
  primaryColor: $primary-color  
}
```

```javascript
// pages/_app.js  
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:

```javascript
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!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055257057/d817e595-d8c6-4793-b3d0-8c2017129667.png align="left")