Next.Js Global CSS Cannot Be Imported from Files Other Than Your Custom <App>

Next.js Global CSS cannot be imported from files other than your Custom App

Use the built-in Next.js CSS loader (see here)
instead of legacy @zeit/next-sass.

1. Replace @zeit/next-sass package with sass.
2. Remove next.config.js. Or do not change CSS loading in it.
3. Move the global CSS as suggested in the error message.

Since Next.js 9.2 global CSS must be imported in Custom <App> component.

// pages/_app.js

import '../global-styles/main.scss'

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

To add styles only to a specific component or page you can use built-in support of CSS modules. (see here)

For example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.

Unable to import css files into NextJs project

Either put all your CSS imports in _app.tsx or you can add *.module.css to your filenames so they get picked up.

You can also override the nextjs webpack config:

// next.config.js

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    return config
  },
}

...

{
  test: /\.s?[ac]ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  exclude: [/node_modules/],
},

In order to override the module rules and css loader, however I wouldn't recommend this if you don't know what you're doing.

How to use component level sass file in next js

That error will come out when you name your SCSS file like styles.scss, Next.js will understand that you are defining global styles but you're trying to import them into your components. For example

//component.jsx
import * as S from '../styles.scss' //throw an error in the terminal

According to this document, you have to follow their naming convention for your styles file like styles.module.scss. Next.js will understand that you're importing a module's style file instead.

//component.jsx
import * as S from '../styles.module.scss' //it's good now!

The intention for this naming convention is that Next.js wants to fetch your resources respectively instead of fetching all resources initially, so they put this particular rule for style files.

nextjs Failed to compile pages/_app.js how to fix it

This is the official document for your problem from the Next.js team:
https://nextjs.org/docs/basic-features/built-in-css-support

You need to import global CSS in the _app.js file to use it globally in your application.

For example, use Tailwind CSS as global like this:

// your _app.js file
// import your CSS file you want to use globally here
import 'tailwindcss/tailwind.css';

const CustomApp = ({ Component, pageProps }) => (
    <Component {...pageProps} />
);

export default CustomApp;

If you just want to use CSS for specific components, please use module CSS. It will be helpful to code splitting your bundle files when you build the production version.

Example to use modular CSS just only for your component:

import styles from './index.module.scss';

const YourComponent = () => {
  return <div className={styles.example}>...</div>;
};

export default YourComponent;

For special cases that you need to import CSS files from the library inside your node_modules. You can import that CSS file from node_modules inside your specific component.

For example:

import { FC } from 'react';
import Slider from 'react-slick';

import 'react-slick/css/slick.css';
import 'react-slick/css/slick-theme.css';

const SlickSlider: FC<any> = ({ children, ...restProps }) => {
  return <Slider {...restProps}>{children}</Slider>;
};

export default SlickSlider;

---

Related Topics