#SCSS compiled in a wrong order

1 messages · Page 1 of 1 (latest)

rocky goblet
#

my production build compiles css file in a wrong order, how do I fix it?

layout.js ```jsx
import '@styles/globals.scss';
import Navigation from '@/modules/navigation/Navigation';
import Footer from '@/modules/footer/Footer';

export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{ children }</body>
</html>
);
}

`Navigation.js` and `Footer.js` have their own styles imported via `import './styles.scss';` at the top of the component. And in the compiled build the css file has first all of the styles from components and only after them styles from globals.scss, therefor my `@import` for the font wont load, since its not at the top of the css file.. Whats causing this?
gray elbowBOT
#

Hi @rocky goblet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems that you're experiencing an issue with CSS import ordering in Next.js. This is a known issue where the order of imported CSS files and modules is not consistent and can change after hot reloading and recompiling everything. This can cause issues like the one you're experiencing where your global styles are being applied after component-specific styles.

Here are a few workarounds suggested by users facing similar issues:

  1. Using PostCSS: One user suggested installing postcss-import and adding it to the postcss.config.js file. This seemed to help with the ordering issue.
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. Separating CSS imports into different files: Another user suggested separating the CSS imports into different files and importing them separately in _app.tsx.
import '@/css/style.css';
import '@/css/style-two.css';
  1. Using SASS to enforce correct ordering: Another workaround is to use SASS to enforce the correct ordering by creating a global.scss file.
@use './a.css';
@use './b.css';

And in layout.tsx import this file

import "./global.scss";

Please note that these are workarounds and may not work in all cases. The issue is still open on the Next.js GitHub page and the team is actively working on a fix.

Sources: Github Issue 16630 (https://github.com/vercel/next.js/issues/16630), Github Issue 32645 (https://github.com/vercel/next.js/issues/32645)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: