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?

Are you sure you are exporting the function MyApp?

alentejo
– alentejo

2021-04-06 06:26:59 +00:00
Commented Apr 6, 2021 at 6:26 — alentejo
– alentejo, Commented Apr 6, 2021 at 6:26

Nishant Minerva · Accepted Answer · 2021-04-05 11:42:08Z

8

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} />
}

answered Apr 5, 2021 at 11:42

Nishant Minerva

1145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yeln Over a year ago

hi, I found out that the css class in global.css ( example: section-sidebar-filter-name ) is now in this format [folder]__section-sidebar-filter-name--[hash:base64:5], that is why the CSS is not being applied, is there a way to exclude only the global.css file from the localIdentName: '[folder]__[local]--[hash:base64:5]' rule?

Germán Over a year ago

I looked all around the internet with no solution except of this. I finally don't need to import globals.css to each component. "TailWind works flawless with Next" my balls.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related