WordPress中CSS/Less不生效排查：Grunt编译后样式无效果

Hey there! Let's walk through the most common reasons your compiled styles aren't showing up, even though Grunt worked and WordPress recognizes the style sheet.

1. Fix Your wp_enqueue_style Implementation #

Your functions.php snippet cuts off, so it’s likely the enqueue code is incomplete or missing critical parts. Here’s the correct structure you need:

function adding_css() {
    // Enqueue the main theme stylesheet
    wp_enqueue_style(
        'theme-main-style', // Unique handle name
        get_stylesheet_uri(), // Automatically points to theme root's style.css
        array(), // Dependencies (leave empty if none)
        wp_get_theme()->get('Version'), // Cache-busting version number
        'all' // Media type (applies to all devices)
    );
}
// Hook the function to the correct action
add_action('wp_enqueue_scripts', 'adding_css');

• Double-check you added the add_action('wp_enqueue_scripts', 'adding_css'); line—without this, WordPress never runs your enqueue function.
• If your style.css isn’t in the theme root directory (e.g., in a css/ subfolder), replace get_stylesheet_uri() with get_template_directory_uri() . '/css/style.css' (adjust the path to match your setup).

2. Verify the Stylesheet is Loading in the Browser #

Open your browser’s DevTools (F12), go to the Network tab, filter for CSS files, and reload the page:

• Look for your style.css—if it shows a 404 status, the path in your enqueue function is wrong. Double-check where Grunt outputs the compiled file.
• If it loads (200 status), click into it to confirm the compiled Less styles are present.

3. Check for Style Specificity or Overrides #

Sometimes your styles are being overwritten by higher-priority rules (from parent themes, plugins, or inline styles):

• In DevTools’ Elements tab, select an element that should have your styles. Look in the Styles panel—if your rules are crossed out, they’re being overridden.
• Fix this by using more specific selectors (e.g., .my-theme .site-header nav instead of just nav) or temporarily add !important to a rule to test (use this sparingly, as it can cause long-term issues).

4. Clear All Caches #

Caching is one of the most common culprits:

• Browser cache: Press Ctrl+F5 (Windows) or Cmd+Shift+R (Mac) to force a hard refresh.
• WordPress plugins: Disable any caching plugins (like WP Rocket or W3 Total Cache) temporarily and clear their cache.
• Server cache: If your host uses caching (e.g., Cloudflare, SiteGround SG Optimizer), log into your host dashboard and clear the server cache.

5. Confirm Your Style.css Has the Required Header Comment #

WordPress relies on a special comment block at the top of style.css to recognize it as the theme’s stylesheet. Make yours looks like this (customize the values):

/*
Theme Name: My Custom Theme
Theme URI: https://mywebsite.com/
Description: A custom-built WordPress theme using Less and Grunt
Author: Stefan Berger
Author URI: https://myprofile.com/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

If this block is missing or formatted incorrectly, WordPress won’t properly associate the stylesheet with your theme.

6. Ensure wp_head() is Properly Placed #

Your header.php includes wp_head(), but double-check it’s right before the closing </head> tag—no extra code or misplaced tags should come between it and </head>. WordPress uses this hook to inject enqueued styles and scripts, so if it’s missing or misplaced, styles won’t load.

内容的提问来源于stack exchange，提问作者Stefan Berger