Issue
Upon building and launching a production build of our application, the CSS fails to load. Inspecting the devtools reveals a multitude of errors and warnings:
https://i.sstatic.net/R07q3.png
Possible Causes
The problems do not occur when running the app in development mode. Other assets such as images or fonts load correctly. We utilize SCSS and import the global stylesheet in _app.tsx as follows:
import "../styles/globals.scss";
To address an issue with another library, we implemented a custom webpack configuration:
module.exports = phase => ({
webpack: (config, { isServer }) => {
// Custom rules here
return config;
}
});
Additionally, this is the file for the custom server used to launch the application in production mode:
const PORT = parseInt(process.env.PORT, 10) || 3364;
const dev = process.env.NODE_ENV !== "production";
// Server setup logic
Assumptions
The custom server stands out as the main distinction between production and development environments, leading me to suspect that the error might stem from there. However, upon inspection, everything appears normal to me. Any insights or suggestions would be greatly appreciated.