Why Your CSS Change Isn’t Showing Up
You change a button color, deploy the site, and still see the old color. There are three places to look: the browser’s CSS rules, the exported files, and the HTTP responses that delivered them. Start with the browser so you can tell which layer needs attention.
1. Find the stylesheet the page actually loaded
In Chrome, open DevTools → Network, select Disable cache, and reload with DevTools open. Filter by CSS, select the stylesheet, and look at Headers and Response. Record the full request URL and search the response for the selector you changed.
- The request returns 404. Check whether the stylesheet exists in the export at the requested path. Look for differences in capitalization, a missing base path, or an old filename in the HTML.
- The request returns 200 and contains the new rule. Go to step 2.
- The request returns 200 and contains the old rule. Go to step 3.
2. Find the rule that wins
Right-click the button and choose Inspect. In Computed, find the property you changed, such as background-color, and expand it to see the source declaration. In Styles, a crossed-out declaration often means another rule overrides it. Check whether the winning rule is more specific, loads later, or applies only at the viewport width you’re testing.
If the color comes from a custom property such as var(--button-color), inspect where that property is defined for this element. A theme or component wrapper can supply a different value.
3. Compare the export with production
Run the site’s normal asset build and export. If you edited SCSS, make sure you compiled it before exporting. Then compare the CSS URL in the generated HTML with the one from DevTools. For a stylesheet served directly from the export, you can compare the files like this. Replace the example URL and path with the ones you found.
curl --fail --silent --show-error \
https://example.com/assets/site.a1b2c3.css -o /tmp/deployed-site.css
cmp public/assets/site.a1b2c3.css /tmp/deployed-site.css
If the files differ, check what was deployed and whether your CDN serves an older copy or transforms the CSS. If the exported HTML points to a new filename and the live HTML points to an old one, investigate the HTML response first.
Content-hashed asset names help here. When the CSS changes, the build generates a new URL. Keep HTML fresh enough to pick up that URL, and verify the fix with Disable cache turned off so you see what a returning visitor would see.