Fixing Next.js Import CSS Error: A Simple Guide

Understanding Next.js CSS Import Error

While working with Next.js, especially if you’re new to it, you might encounter a notorious error related to importing CSS: Next.js Error when Importing CSS. This error occurs due to Next.js’s opinionated nature about where and how static files like CSS should be included in your project. Next.js supports CSS and built-in Sass support, but it needs specific configurations to work correctly.

Enabling CSS Support in Next.js

Starting with Next.js 9.2, native CSS support has been introduced. It allows you to import CSS files directly in your components using standard import statements. However, if you’re not following the recommended file structures or importing methods, you might see errors popping up.

Ensure that you are importing the CSS files within your component or pages, as global imports should only be present in your _app.js file. For instance, importing a stylesheet within pages/index.js should be as straightforward as:

<style jsx global> @import '/path/to/your/file.css'; </style>

If your project includes a custom babel.config.js, make sure your Babel setup doesn’t interfere with Next.js’s built-in CSS handling.

How to Import Global CSS

Global CSS files, on the other hand, should only be imported in your _app.js or _app.tsx file using a standard import. For example:

import '../styles/global.css'; \

export default function MyApp({ Component, pageProps }) { 
    return <Component {...pageProps} />; 
}

Remember that importing global CSS anywhere else will result in the error you’re encountering.

Modular CSS with Next.js

If you still face problems, consider using CSS Modules, which are scoped to the component. They can be used without any configuration and work by creating a CSS file that follows the naming pattern [name].module.css. For instance:

import styles from './Button.module.css'; 

export default function Button({ children }) { 
  return <button className={styles.button}>{children}</button>; 
}

This provides component-scoped styling and avoids the issue of global adverse side effects in your stylesheet imports. You don’t need any additional configuration for this; just ensure your CSS file’s name ends with .module.css, and you import it using the styles variable.

Using SASS or SCSS

If you prefer working with SASS/SCSS, Next.js offers built-in support but with slight additional setup. To enable SASS, you need to install sass to your project:

npm install --save sass

After installing, you can import SASS files the same way as CSS:

import '../styles/globals.scss'; 

export default function MyApp({ Component, pageProps }) { 
  return <Component {...pageProps} />; 
}

Note that the same rule applies to SASS: global stylesheets are only to be imported inside the _app.js file.

A Working Code Example

Let’s take a look at a simple working example that brings together the aforementioned concepts:

pages/_app.js

This is the custom App component in Next.js. It wraps all the pages and should be used to import global CSS styles.

// pages/_app.js
import '../styles/global.css'; // Import global styles only once

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

components/Button.js

A reusable button component styled with a CSS module.

// components/Button.js
import styles from './Button.module.css';

export default function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

styles/Button.module.css

CSS module for the Button component.

/* styles/Button.module.css */
.button {
  background-color: deepskyblue;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

styles/global.css

Global CSS styles applied to the entire application.

/* styles/global.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               'Helvetica Neue', Arial, sans-serif;
}

Notes and Enhancements:

1. Global CSS Import: In _app.js, global CSS is imported. This is the recommended place to import global styles in Next.js applications.
2. Component Structure: The Button component is a simple, reusable UI element with its own styling defined in Button.module.css. This modular approach helps in maintaining and scaling the UI.
3. Styling Convention: Using CSS modules for component-specific styles (Button.module.css) and a separate global stylesheet (global.css) is a common and effective styling strategy in Next.js projects.
4. Code Organization: Separating components, pages, and styles into different files and folders is a good practice for maintaining a clean and manageable codebase in Next.js applications.

Remember to always check the official Next.js documentation for the most updated practices on importing styles, as the framework continues to evolve.