Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNrtmE9rGzEQxb/KdC9JwN4llF7cjUvpvQQSctqLrNVuVfQPjbS4GH/3jqStm9BToZRA5IPtHT3N02jf6XdqPjvXLlE0u6ZH7qULgCJEtx+M1M76AI/iGGDyVsNV232xOsuvBtN3RU9KeghCO8WCoCeAPu/hVkVt8G5o3g9Nrg/hUXiBsMhZKvgmOXDmgkQExRxGBIGhhScmNjAptkQNjE7BlMR38BBNAG0N0v5RzobUTIWIGwhJUHoKbOm8r8finoSzl4YFaQ1t8cwLGCNPRmwEJ7yk/sAVQ5TU+EHwwDQCJsEhKqrDKC4ntUaO5P8kk8skvD0COuoti+V/mPxvB3pj77umtqa2Rqqmtqa2WtTU1tTW1NbU1kjV1NbU/kOLTBi6hBgIKvTdhTw0m6Ygi61mrv2O1hDUoOIvZpEQx0tMMcqlXA4xCk6qFVPQCiob9kQ40k/xI+1Lu4Q9qPAcmtCUZqZeAXOnIawI5USxmaQR9946hPNKUxJG+ZixSPaUJgg/MS6gyE6lnD4rSfm0g69RH4QvK+fkX5YNkskferiD21VKf58doc/f++ubPMFvjtNj+KEEoOc0RIE9ty1Hmga6dL2XAl1lmy6smBa77czcDj64Y55prXFLb3UHy/YgzXi9nuuGFOfm/BPdlarU

Steps to reproduce

1. Create a variable to be given to the CSS
2. Use the variable with v-bind() in a CSS or SCSS file linked via SRC

What is expected?

That the variable is also injected in an SRC linked file. I saw that there was a ticket for a general injection in all css imports, which in my opinion doesn't have to be but I think it should be possible to at least separate the code via SRC files.

What is actually happening?

Locally (not reproducible in the SFC Playground), the correct CSS variable was even set at the position of the v-bind. But the CSS variable is not defined. In the SFC Playground, it does not seem to do anything at the moment. In both cases, however, it is currently not possible to pass on variables to CSS via a v-bind and an src attached file.

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 912.25 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0.1
    Safari: 15.4

Any additional comments?

It was noticed in Nuxt 3.1.2 with SCSS extension, but could be readjusted via the SFC Playground in Vue 3.2.47.

#5688