With Vue 3.5.15, bootstrap5 and sass, grid system does not work properly

[bojardo]

Vue version

3.5.15

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-r6jsnytm?file=src%2Fmain.js,src%2Fcomponents%2FHelloWorld.vue

Steps to reproduce

COL-4

COL-8

What is expected?

Expected to see a single row with 2 columns: the first one half the size of the second one.

What is actually happening?

Seeing 2 rows, one for each column, bot full size.

System Info

System:
    OS: Linux 6.14 Arch Linux
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 20.87 GB / 31.09 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 22.16.0 - /var/lib/snapd/snap/bin/node
    Yarn: 1.22.22 - /var/lib/snapd/snap/bin/yarn
    npm: 11.4.1 - /usr/local/bin/npm
  Browsers:
    Chromium: 136.0.7103.113
  npmPackages:
    vue: ^3.5.15 => 3.5.15

Any additional comments?

With Vue version 3.5.14 everything is OK

[edison1105]

a workaround:

<style lang="scss" scoped>
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
.test4 {
  color: $green-600;
}
.test8 {
  color: $orange-600;
}
</style>

Avoid importing Bootstrap styles inside scoped styles, as it forces Bootstrap's global styles to be scoped, which is not the intended behavior

---

related PR #12918
This PR has indirectly changed the weight of the universal selector

in v3.5.14

.row[data-v-e17ea971] > * {
    flex-shrink: 0;
    width: 100%;
    ...
}

in v3.5.15

.row[data-v-e17ea971] > [data-v-e17ea971] {
    flex-shrink: 0;
    width: 100%;
    ...
}

This causes the width in the .col-4 and .col-8 to have no effect.

[edison1105]

closed via #13406

[bojardo]

Thanks a lot! Now with version 3.6.16 everything works