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?