SCSS compiled in a wrong order

Question

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

layout.js

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?

SCSS compiled in a wrong order

0 Replies