SASS编译突然中断，自定义WordPress主题样式失效求助

Let’s fix this step by step—since Laravel Mix is reporting successful builds but your header styles aren’t updating, the problem is almost always related to paths, caching, or a small configuration oversight. Here’s how to diagnose and resolve it:

1. Confirm Your Compiled CSS File is Actually Updating #

First, let’s rule out whether Laravel Mix is even compiling your changes into app.css:

• Navigate to your theme’s root directory (where functions.php lives) and open app.css. Look for the styles from _header.scss (like header { background: ... }).
  • If those styles aren’t present, Mix isn’t including your _header.scss correctly. Check your app.scss import: since _header.scss is in the same src folder as app.scss, try updating the import to use a relative path explicitly:

    @import './header'; // Instead of just 'header'
    

  • Also verify your webpack.mix.js output path: mix.sass('src/app.scss', './') should compile to your theme’s root app.css—confirm that file exists and isn’t empty.

2. Blast All Caches (This is the #1 Culprit) #

Caching can silently block updated styles from loading, even if Mix compiles correctly:

• Browser Cache: Force a hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). You can also open DevTools > Network tab and check "Disable cache" to test without caching.
• WordPress Cache: If you use a caching plugin (like WP Rocket or W3 Total Cache), clear its cache immediately. If you don’t have a plugin, restart your MAMP server to flush any server-side caching WordPress might be using.
• MAMP Cache: Sometimes MAMP’s Apache/Nginx holds onto old static files. Stop and restart the MAMP servers to ensure it’s serving the latest app.css.

3. Verify Laravel Mix is Watching File Changes #

If you’re using npm run watch and Mix isn’t triggering builds when you save _header.scss:

• Stop the watch process with Ctrl+C, then restart it with npm run watch-poll instead. The watch-poll flag forces Mix to actively check for file changes (useful if your OS’s file system watcher isn’t working reliably).
• Try running npm run dev manually. If this generates updated styles in app.css, the issue was with the watcher—not the compilation itself.

4. Check for Silent Sass Errors #

Even if Mix says "build successful", a subtle Sass issue could break your styles:

• Your _header.scss uses the $light variable from _colors.scss. If $light isn’t defined correctly (or _colors.scss isn’t being imported properly), the background property will be invalid (e.g., background: ;). Test this by replacing $light with a hardcoded color like #f8f9fa in _header.scss and see if the style loads.
• Double-check your Sass syntax: nested selectors like .logo inside header are valid, but make sure you haven’t missed any closing braces (your provided code looks clean, but it’s worth confirming).

5. Inspect the Page’s Loaded Styles #

Use your browser’s DevTools to confirm your styles are being loaded and applied:

• Go to the Elements tab, select your <header> element, and check the Styles panel. Look for your app.css styles—are they present? Are they being overridden by Bootstrap or style.css?
• Switch to the Network tab, reload the page, and find the app.css request. Check its status:
  • If it’s 304 Not Modified, your browser is still using cached content.
  • If it’s not loading at all, double-check your functions.php enqueuing path: get_template_directory_uri() . '/app.css' should point to the correct location of your compiled CSS.

内容的提问来源于stack exchange，提问作者Jeff S