如何在Shopware 6中按页面类型实现CSS代码分割？

Shopware 6本身支持按页面拆分CSS资源，官方推荐通过多入口webpack配置+页面模板定向加载的方式实现，具体步骤如下：

一、配置多入口SCSS文件 #

1. 在你的主题目录（比如custom/plugins/YourTheme/src/Resources/app/storefront/src/scss）下，创建页面专属的SCSS入口文件，例如product.scss、checkout.scss。
2. 修改主题根目录下的webpack.config.js，新增这些入口：

module.exports = () => {
    return {
        entry: {
            storefront: './src/Resources/app/storefront/src/main.js',
            product: './src/Resources/app/storefront/src/scss/product.scss',
            checkout: './src/Resources/app/storefront/src/scss/checkout.scss'
        }
    };
};

3. 把公共样式（比如基础布局、通用组件样式）抽成base.scss，在各个页面入口中导入，避免重复打包：

// product.scss
@import './base.scss';
// 商品页专属样式
.product-detail {
    // ...
}

二、在对应页面加载专属CSS #

方式1：页面模板单独加载 #

找到对应页面的Twig模板（比如商品详情页是src/Resources/views/storefront/page/product-detail/index.html.twig），添加样式加载代码：

{% block page_product_detail_head_css %}
    {{ parent() }}
    {% sw_asset 'bundles/yourtheme/product.css' %}
        <link rel="stylesheet" href="{{ asset_url }}">
    {% endsw_asset %}
{% endblock %}

替换yourtheme为你的主题实际名称（对应composer.json里的name字段，比如yourvendor/yourtheme会生成yourtheme的bundle目录）。

方式2：全局模板动态加载 #

如果想在全局统一处理，可修改src/Resources/views/storefront/layout/header/header.html.twig，通过页面类型判断动态加载：

{% block layout_header_head_styles %}
    {{ parent() }}
    {% if page.type == 'product_detail' %}
        {% sw_asset 'bundles/yourtheme/product.css' %}
            <link rel="stylesheet" href="{{ asset_url }}">
        {% endsw_asset %}
    {% elseif page.type in ['checkout_index', 'checkout_cart'] %}
        {% sw_asset 'bundles/yourtheme/checkout.css' %}
            <link rel="stylesheet" href="{{ asset_url }}">
        {% endsw_asset %}
    {% endif %}
{% endblock %}

三、编译与发布资源 #

执行Shopware的资源编译命令，确保新增的CSS文件被打包发布：

# 编译主题资源
bin/console theme:compile
# 发布静态资源到public目录
bin/console assets:install

生产环境建议加上--env=prod参数，开启压缩和优化。

关键注意事项 #

• 不要删除默认的storefront入口，它负责加载全局基础样式和JavaScript。
• 页面类型的判断值可通过Twig调试工具（{{ dump(page.type) }}）查看具体值。
• 若使用Shopware的缓存机制，修改模板或配置后需执行bin/console cache:clear。

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