How to use SCSS in svelte components?

Svelte
1

I’m using fourseven:scss. SCSS in my /client/main.scss works fine. When I do something like this in a .svelte component:

<style type="text/scss">
  .container {
    height: 100%;
    display: flex;
    flex: auto;
    &.has-banner {
      height: calc(100% - 28px);
      margin-top: 28px;
    }
  }
</style>

I get an error at the ampersand.

Any ideas?

1 Like
2

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:

  .container {
    height: 100%;
    display: flex;
    flex: auto;
    .has-banner {
      height: calc(100% - 28px);
      margin-top: 28px;
    }
  }

Usually I only use the & when handling thing like hover etc:

  .container {
    height: 100%;
    display: flex;
    flex: auto;
   .has-banner {
      height: calc(100% - 28px);
      margin-top: 28px;
      &:hover {
        background: red;
      }
    }
  }
1 Like
3

Ah good point.

I’m still seeing the error: Identifier is expected even when I update to:

.container {
    height: 100%;
    display: flex;
    flex: auto;
   .has-banner {
      height: calc(100% - 28px);
      margin-top: 28px;
    }
  }
4

I don’t think the Svelte compiler supports in-component SCSS. Use of fourseven’s package doesn’t change that.

Maybe there is a way to get Svelte to support SCSS; that would probably be a question for the Svelte community.

2 Likes
5

HAHA I wanted to say this but I really wasn’t 100% sure! Thanks for clarifying!

6

Yeah it looks like there have been some efforts to get postcss working with the svelte:compiler package: https://github.com/meteor-svelte/meteor-svelte/pull/30

I don’t have experience with postcss but I thought it could help with this. Was curious if anyone could point me in the right direction.

1 Like
7

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!

1 Like
8

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.

3 Likes
9

For those still wanting SCSS in Svelte components inside Meteor, here’s a PoC plugin built on top of zodern:melte with TS and SCSS support: The trusted source for JavaScript packages, Meteor resources and tools | Atmosphere

Feedback welcome

2 Likes