Error when importing a third party .scss file as a global with Error "Missing whitespace before :global"

Our custom component wraps a third party Carousel. We'd like to incorporate the third party css into the module but need to mark it as global.

I have used the following in the .scss file

```
:global {
@import 'node_modules/swiper/swiper.scss';
@import 'node_modules/swiper/modules/pagination/pagination.scss';
}
```

this is the correct syntax, but it errors with "Missing whitespace before :global "


Any thoughts on how to fix this?