Bootstrap子主题（Barrio）CSS加载顺序异常问题排查

我负责部署多个基于Bootstrap（Barrio）+自定义子主题+段落+布局段落的Drupal站点，子主题中配置了断点相关设置，但其中一个站点出现CSS加载顺序错误，以下是详细配置与问题现象：

子主题核心配置文件 #

info.yml配置 #

libraries:
- custom_barrio/bootstrap
- custom_barrio/global-styling
- custom_barrio/small-device-styling
- custom_barrio/medium-device-styling
- custom_barrio/large-device-styling
- custom_barrio/extra-large-device-styling
- custom_barrio/wide-device-styling

libraries.yml配置 #

global-styling:
version: VERSION
js:
js/global.js: {}
css:
component:
css/style.css: {}
css/colors.css: {}
css/edit.css: {}
css/add.css: {}

small-device-styling:
css:
theme:
css/smalldevice.css: {media: all and (min-width: 576px)}

medium-device-styling:
css:
theme:
css/mediumdevice.css: {media: all and (min-width: 768px) }

large-device-styling:
css:
theme:
css/largedevice.css: {media: all and (min-width: 992px)}

extra-large-device-styling:
css:
theme:
css/extralargedevice.css: {media: all and (min-width: 1200px)}

wide-device-styling:
css:
theme:
css/widedevice.css: {media: all and (min-width: 1600px)}
.....

breakpoint.yml配置 #

custom_barrio.global-styling:
label: global-styling
mediaQuery: ''
weight: 0
multipliers:
- 1x

custom_barrio.small-device-styling:
label: small-device-styling
mediaQuery: 'all and (min-width: 576px) '
weight: 1
multipliers:
- 1x

custom_barrio.medium-device-styling:
label: medium-device-styling
mediaQuery: 'all and (min-width: 768px)'
weight: 2
multipliers:
- 1x

custom_barrio.large-device-styling:
label: large-device-styling
mediaQuery: 'all and (min-width: 992px)'
weight: 3
multipliers:
- 1x

custom_barrio.extra-large-device-styling:
label: extra-large-device-styling
mediaQuery: 'all and (min-width: 1200px)'
weight: 4
multipliers:
- 1x

custom_barrio.wide-device-styling:
label: wide-device-styling
mediaQuery: 'all and (min-width: 1600px)'
weight: 5
multipliers:
- 1x

异常站点的CSS加载顺序 #

<link rel="stylesheet" media="all and (min-width: 1200px)" href="/themes/custom/custom_barrio/css/extralargedevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 992px)" href="/themes/custom/custom_barrio/css/largedevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 768px)" href="/themes/custom/custom_barrio/css/mediumdevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 576px)" href="/themes/custom/custom_barrio/css/smalldevice.css?sroev9" />

<link rel="stylesheet" media="all and (min-width: 1600px)" href="/themes/custom/custom_barrio/css/widedevice.css?sroev9" />

环境差异 #

• 正常站点：Drupal 10.4.1 + Barrio 5.5.19
• 异常站点：Drupal 10.2.0 + Barrio 5.5.16

问题分析与修复方案 #

核心原因 #

加载顺序异常是Drupal核心版本间的样式排序逻辑变更导致的：

1. Drupal 10.2.x及更早版本中，带有媒体查询的样式表会被核心自动按min-width值降序排列（大宽度优先），且该逻辑会忽略breakpoint.yml中设置的权重优先级。
2. Drupal 10.4.x版本调整了排序规则，优先遵循breakpoint.yml定义的weight值，同时结合媒体查询逻辑，保证配置的加载顺序生效。

你的breakpoint.yml配置本身是正确的：权重从0到5递增，对应从小屏到大屏的移动优先逻辑，在新版本环境中能正常工作。

修复方案 #

针对异常站点，有两种高效解决方式：

1. 版本升级：将Drupal升级至10.4.x以上，Barrio主题升级至5.5.19以上，直接利用新版本的排序逻辑修复问题。
2. 添加链式依赖：在libraries.yml中为每个样式库添加依赖关系，强制指定加载顺序，不受旧版本核心自动排序影响：

   small-device-styling:
     css:
       theme:
         css/smalldevice.css: {media: all and (min-width: 576px)}
     dependencies:
       - custom_barrio/global-styling
   
   medium-device-styling:
     css:
       theme:
         css/mediumdevice.css: {media: all and (min-width: 768px) }
     dependencies:
       - custom_barrio/small-device-styling
   
   large-device-styling:
     css:
       theme:
         css/largedevice.css: {media: all and (min-width: 992px)}
     dependencies:
       - custom_barrio/medium-device-styling
   
   extra-large-device-styling:
     css:
       theme:
         css/extralargedevice.css: {media: all and (min-width: 1200px)}
     dependencies:
       - custom_barrio/large-device-styling
   
   wide-device-styling:
     css:
       theme:
         css/widedevice.css: {media: all and (min-width: 1600px)}
     dependencies:
       - custom_barrio/extra-large-device-styling
   

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