Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

My custom css for navbar

.navbar{
  position: sticky;
  width: fit-content;
  margin-left: 25px;
  margin-top: 25px;
  height: 48px;
  border-radius: 2px;
  @media screen and (max-width: 780px) {
		width: 100%;
    margin-left: 0px;
    margin-top: 0px;
	}
}

The media override for smaller screen works well on yarn start. but this information got lost after build.
I checked the css file in build folder, it does not contain any @media related to max-width:780px either. My guess is those information got lost during build

Reproducible demo

No response

Steps to reproduce

put this in custom.css to override navbar style

.navbar{
  position: sticky;
  width: fit-content;
  margin-left: 25px;
  margin-top: 25px;
  height: 48px;
  border-radius: 2px;
  @media screen and (max-width: 780px) {
		width: 100%;
    margin-left: 0px;
    margin-top: 0px;
	}
}

Expected behavior

the margin for navbar should be 0 for screen smaller than 780px. however, it's still 25px. And I tried to uss 996px for the width, still doesn't work.

it works as expected under yarn start but not on yarn serve after build

Actual behavior

navbar margin is still 25px

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: 2.4.1
• Environment name and version : Node.js v20.2.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Macos 13.5.1 (22G90)

Self-service

• I'd be willing to fix this bug myself.