WordPress子主题CSS修改无效，Wp-less-Cache自动文件冲突问题

Hey Jose, I’ve run into this exact issue with WordPress themes that use LESS preprocessing—let’s walk through why this is happening and how to fix it properly:

Why Your Child Theme CSS Isn’t Working #

Your theme is using a LESS compiler that automatically compiles its LESS files into a cached CSS file (theme-less.css in Wp-less-Cache). When you modify your child theme’s mytheme.css, the browser is either loading the cached LESS-compiled CSS after your child theme styles, or the cached styles have higher specificity, so they’re overriding your changes. Directly editing the cached file works temporarily, but those changes will get wiped the next time the theme re-compiles LESS (after updates, setting changes, or cache clears).

Step-by-Step Solutions #

1. Ensure Your Child Theme CSS Loads After the Parent Theme’s Styles

First, double-check that your child theme’s functions.php is enqueuing your styles correctly, with a higher priority to load after the parent theme’s cached LESS CSS. Add or update this code in your child theme’s functions.php:

function my_child_theme_enqueue_styles() {
    // Replace 'parent-style' with your parent theme's actual style handle (check parent theme's functions.php)
    $parent_style_handle = 'parent-style';
    
    // Load parent theme styles first
    wp_enqueue_style( $parent_style_handle, get_template_directory_uri() . '/style.css' );
    
    // Load child theme styles, dependent on parent styles, with higher priority
    wp_enqueue_style( 'child-theme-custom',
        get_stylesheet_directory_uri() . '/mytheme.css',
        array( $parent_style_handle ),
        wp_get_theme()->get('Version'),
        'all'
    );
}
// Use priority 100 to ensure this runs after most default enqueues
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles', 100 );

This ensures your mytheme.css loads last, giving it higher priority over the cached theme-less.css.

2. Clear the LESS Cache

Most LESS-enabled WordPress themes include a built-in way to clear the cache:

• Check your theme’s settings panel (look for options like "Clear LESS Cache", "Recompile Styles", or "Purge Cache"). Click this option to force the theme to regenerate the theme-less.css file.
• If there’s no built-in option, manually delete the Wp-less-Cache folder via FTP or your hosting file manager. The theme will automatically recreate it with fresh compiled styles, and your child theme CSS should now take effect.

3. Boost CSS Specificity (If Needed)

If some styles still aren’t overriding, you can make your child theme selectors more specific than the ones in theme-less.css. For example:
Instead of:

.button {
    background: blue;
}

Use a more specific selector:

body .site-content .button {
    background: blue;
}

Avoid using !important unless absolutely necessary—it can cause maintenance headaches later, but it’s a quick fix for stubborn styles:

.button {
    background: blue !important;
}

4. Never Edit the Cached theme-less.css File

As you noticed, editing this file works temporarily, but any future recompile (from theme updates, setting changes, or cache clears) will overwrite your edits. Always use your child theme for customizations to keep changes safe and persistent.

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