css - 店面子主题仍然加载父 CSS

Question

我对 Storefront 子主题有疑问。 我创建了一个店面子主题，就像他们在这里建议的那样:https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

子主题工作正常，我可以编写我的 CSS，在 functions.php 中编写我的代码并覆盖模板文件，但子主题仍然加载父主题 CSS。

如何在不加载父主题的情况下创建子主题？

Answer 1

将这些函数添加到您子主题的 functions.php。

此代码将禁用 Storefront 默认 CSS 的加载。

来源:https://github.com/stuartduff/storefront-child-theme

/**
 * Storefront automatically loads the core CSS even if using a child theme as it is more efficient
 * than @importing it in the child theme style.css file.
 *
 * Uncomment the line below if you'd like to disable the Storefront Core CSS.
 *
 * If you don't plan to dequeue the Storefront Core CSS you can remove the subsequent line and as well
 * as the sf_child_theme_dequeue_style() function declaration.
 */

add_action( 'wp_enqueue_scripts', 'sf_child_theme_dequeue_style', 999 );

/**
 * Dequeue the Storefront Parent theme core CSS
 */
function sf_child_theme_dequeue_style() {
    wp_dequeue_style( 'storefront-style' );
    wp_dequeue_style( 'storefront-woocommerce-style' );
}

此外，您可以禁用 WooCommerce 标准样式表，

来源:https://docs.woocommerce.com/document/disable-the-default-stylesheet/

/**
 * Set WooCommerce image dimensions upon theme activation
 */
// Remove each style one by one

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );

function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}