Nextjs - Global.css style not applying/working on pages/components

Question

I am new to nextjs

I have a css class in styles/globals.css:

.section-sidebar-filter-name {
  margin: 0 0 .5rem;
}

and I have the import statement in pages/_app.js:

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
...

};

but the CSS class style is not applied to the react components in the pages when I view it in chrome browser developer mode ( Example: test.js page ):

function Test() {

   return(
      <h3 className="c-clickable section-sidebar-filter-name">Test</h3>
   )

}

next.config.js:

module.exports = {
    webpack: (config) => {
        const rules = config.module.rules
            .find((rule) => typeof rule.oneOf === 'object')
            .oneOf.filter((rule) => Array.isArray(rule.use));

        rules.forEach((rule) => {
            rule.use.forEach((moduleLoader) => {
                if (moduleLoader.loader.includes('css-loader') && !moduleLoader.loader.includes('postcss-loader')) {
                    delete moduleLoader.options.modules.getLocalIdent;
                    moduleLoader.options = {
                        ...moduleLoader.options,
                        modules: {
                            ...moduleLoader.options.modules,
                            localIdentName: '[folder]__[local]--[hash:base64:5]',
                            // getLocalIdent: (context, localIdentName, localName, options) => {
                            //     return "whatever_random_class_name";
                            // },
                            // You can also add other css-loader options here
                        }
                    };
                }
            });
        });

        return config;
    }
};

anyone knows what I did wrong?

Answer 1

You need to create a file inside pages directory (_app.js) with the following code :-

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

This App component is the top-level component which will be common across all the different pages. You can use this App component to keep state when navigating between pages, for example.

In Next.js, you can add global CSS files by importing them from pages/_app.js. You cannot import global CSS anywhere else.

The reason that global CSS can't be imported outside of pages/_app.js is that global CSS affects all elements on the page.

If you were to navigate from the homepage to the /posts/first-post page, global styles from the homepage would affect /posts/first-post unintentionally.

You can place the global CSS file anywhere and use any name. So let’s do the following:

Create a top-level styles directory and create global.css inside. Add the following content to styles/global.css. It resets some styles and changes the color of the a tag:

html,
body {
 padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  }    

* {
  box-sizing: border-box;
}

   a {
 color: #0070f3;
 text-decoration: none;
  }

a:hover {
 text-decoration: underline;
   }

 img {
 max-width: 100%;
 display: block;
}    

Finally, open pages/_app.js add import the CSS file like so:

import '../styles/global.css'

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