Is the class .has-banner just nested in .container? If yes I am not sure you need the & in there. We tend to keep our .scss separate from the .svete components (old habits die hard) but even in there we would typically write this as so:
PostCSS is a thing of beauty, but unfortunately its not the same as a SCSS compiler. You CAN still use SCSS in your project, but you will need to keep it separate in SCSS files. Me personally, I like to create a ‘stylesheets’ folder in my client folder and scaffold from there…thats just personal preference.
I would highly encourage you to read this article that talks about PostCSS:
Its a bit long in the tooth, but it give a good breakout of what it does.
Again a bit long in the tooth, but we still use this PostCSS package for Meteor and it works great!
I would also just suggest keeping SCSS separate and using regular CSS in components. This is what I’m doing in my application. I’m not missing the scoping so much since Svelte CSS is already scoped to the component. The main downside I am missing, however, is that you can’t use SCSS variables (like colors) in your Svelte component CSS. If someone can come up with a Svelte plug-in for that, it’d be nice.