店面子主题仍然加载父CSS

Question

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

子主题运行良好，我可以编写CSS，在functions.php中编写代码，并覆盖模板文件，但子主题仍然加载父主题CSS。

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

Answer 1

将这些函数添加到子主题的函数.pp.

此代码将禁止加载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;
}

Answer 2

自2020年7月7日发布的Storefront 2.5.8起，由于Pull请求#1369，Storefront父主题样式表的出列方式必然发生了变化。

此提交建立Storefront样式表(handle-name|路径/to/file.css)：

• storefront-style|wp-content/themes/storefront/style.css和
• storefront-icons|wp-content/themes/storefront/assets/css/base/icons.css

作为storefront-woocommerce-style|wp-content/themes/storefront/assets/css/woocommerce/woocommence.css.的显式依赖项

进行此更改是为了使子主题可以将storefront-woocommerce-style定义为依赖项，而不会有破坏其他Storefront样式表顺序的风险，也不需要为排队的依赖项设置更高的优先级来减轻这种破坏-根据Issue#1299。

由于这种依赖关系，现在任何简单地将storefront-style样式表(或storefront-icons)出列的尝试都将不起作用(无论优先级设置如何)。您必须首先重新定义/重置storefront-woocommerce-style的依赖项，然后使用高优先级，任何删除的依赖项都可以出列。

根据以下示例；

1. 首先将wooccommerce样式仅以图标作为依赖项进行排队
2. 然后按照孩子的风格排队
3. 最后，店面风格被取消排队

在这个例子中，我故意在wooccommerce之后将我的子样式排队，因为我已经覆盖了自己的一些wooccommence样式(如果需要更低的优先级，我可以将其放在dequeue_styles函数中)。如果不是这样的话，而且我的儿童风格只是店面风格的直接替代品，我可以简单地将其作为wooccommerce的另一个依赖，使用图标风格array( 'storefront-child-style', 'storefront-icons' )。或者，如果您的子样式已经取代了wooccommerce和店面样式，请从wooccommence中删除所有依赖项，然后使图标成为您子样式的依赖项，再将wooccommerce和店面样式一起删除。等等…根据你的具体需要无限调整。

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_styles() {
wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/assets/css/woocommerce/woocommerce.css', array( 'storefront-icons' ), $storefront_version );
wp_enqueue_style( 'storefront-child-style', get_stylesheet_directory_uri() . '/style.css', '', $storefront_version );
}
add_action( 'wp_enqueue_scripts', 'dequeue_styles', 99 );
function dequeue_styles() {
wp_dequeue_style( 'storefront-style' );
}