Css not loading in production build of next.js

Question

My next.js app has root folders app, components, and public along with other files like package.json, package-lock.json, store.js,etc. app folder has another folder named dashboard which represents a new route /dashboard and some files layout.jsx, page.jsx,styles.js, appSlice.js, favicon.ico, globals.css

Here is my package.json dependencies

"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.1.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.1",
"@mui/styles": "^5.13.2",
"@reduxjs/toolkit": "^1.9.5",
"chart.js": "^4.3.0",
"next": "13.4.3",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.9",
"react-redux": "^8.0.5",
"yup": "^1.1.1"

styles.js file inside app directory contains

 import {makeStyles} from '@mui/styles';

  export const useStyles = makeStyles({
  height100vh: {
        height: '100vh',
      },
 height100percent: {
    height: '100%',
  },
  leftColumn: {
    textAlign: 'center',
    backgroundImage: 'url("/assets/images/Rectangle 3.svg")',
    position: 'relative',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
  },
  leftBottomImageContainer: {
    height: '55%',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    width: '100%',
    backgroundImage: 'url("/assets/images/wave.svg")',
    alignItems: 'center',
    justifyContent: 'center',
  },
  leftBottomText: {
    display: {xs: 'none', md: 'flex'},
    fontWeight: 700,
    fontSize: '40px',
    color: '#424242',
    marginTop: '75px',
    padding: '5px',
  },
  rightColumn: {
    backgroundImage: 'url("/assets/images/Mask Group.svg")',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'top right',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  loginBox: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  loginText: {
    fontWeight: 600,
    fontSize: '36px',
    textAlign: 'center',
  },
  rightBackgroundImage: {
    backgroundImage: 'url("/assets/images/Mask Group.svg")',
  },
    })

here is page.jsx code

'use client';

import LoginForm from '@/components/LoginForm';
import {Grid, Typography, Box} from '@mui/material';
import {useStyles} from './styles';

const Login = () => {
  const classes = useStyles();
  return (
    <main>
      <section className={classes.height100vh}>
        <Grid container className={classes.height100percent}>
          <Grid item md={4} className={classes.leftColumn}>
            <Box
              className={classes.leftBottomImageContainer}
              display={{xs: 'none', md: 'flex'}}
            >
              <Typography className={classes.leftBottomText}>
                Your Wellness Journey Begins Here
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={12} md={8} className={classes.rightColumn}>
            <Box className={classes.rightBackgroundImage}></Box>
            <Box className={classes.loginBox} width={{md: '50%'}}>
              <Typography
                className={classes.loginText}
                marginBottom={{xs: '25px', md: '50px'}}
              >
                Login
              </Typography>
              <LoginForm />
            </Box>
          </Grid>
        </Grid>
      </section>
    </main>
  );
};

export default Login;

I am creating a build that is working totally fine on the local machine but on the production server css of the login page that is in app/styles.js is not applied. While other pages are working fine both on the server and local machine. Also my build is working fine on local machine I'm using npm run build for generating build and then npm start for serving it I have these scripts inside my package.json

 "dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"

Css not loading in production build of next.js

0 Answers0