fix: Enhance CSS handling in Next.js configuration and adjust import …

…order for global styles

next.config.js

@@ -1,4 +1,3 @@
-
 const { default: next } = require('next');
 const withMDX = require('@next/mdx')({
     extension: /\.(md|mdx)$/,
@@ -13,17 +12,23 @@ process.env.NEXT_PUBLIC_ASSET_PREFIX = process.env.PAGES_PATH || '';
 
 const nextConfig = {
     output: "export",
-    // trailingSlash: true,
-    // basePath: process.env.PAGES_PATH || '',
     images: {
         unoptimized: true,
     },
+    // Add CSS optimization
     experimental: {
-        optimizeCss: true,
+        optimizeCss: true, // Enable CSS optimization
     },
+    webpack(config) {
+        // CSS handling
+        config.module.rules.push({
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+        });
+        return config;
+    }
 }
 
 console.log(nextConfig);
 
-
 module.exports = nextConfig;

pages/_app.js

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import Head from 'next/head';
-// MUI styles first
+
+// MUI base
 import CssBaseline from '@mui/material/CssBaseline';
 import { StyledEngineProvider } from '@mui/material/styles';
 
@@ -9,16 +10,16 @@ import 'highlight.js/styles/obsidian.css';
 import 'allotment/dist/style.css';
 import 'react-medium-image-zoom/dist/styles.css';
 
+// Global styles last to override
+import '../styles/styles.scss';
+
 // Framework imports
 import dynamic from 'next/dynamic';
 import { ThemeProvider } from 'next-themes';
 import { SWRConfig, useSWRConfig } from 'swr';
 import { useRouter } from 'next/router';
 import { GitHubProvider } from '../components/GitHubContext';
 
-// Custom styles last
-import '../styles/styles.scss';
-
 const Footer = dynamic(() => import('../components/Footer'));
 
 function MyApp({ Component, pageProps }) {