Nesting doesn't work in scoped SCSS?

[brycewray]

I'm not sure if what I'm mentioning here is a bug or the way îles is supposed to work, so I'll mention it here, first.

Nested SCSS works fine if imported into a site-wide app.ts file. However, if used in a component or layout as scoped SCSS, the nesting doesn't work. For example:

.blueBox {
   background: hsl(200, 100%, 95%);
   p {
     font-size: 85%;
   }
}

If imported within an SCSS file into app.ts, the sizing of the p nested within the .blueBox class is respected. However, if it's done only within <style scoped lang="scss"> (or, alternatively, <style lang="scss" scoped> — I've tried it both ways), the nested p styling is ignored.

I don't see anything in either îles documentation or Vite documentation that would account for this.

Actual use example:

• Component — https://github.com/brycewray/iles-site/blob/main/src/components/Box.vue
• HTML page — https://iles-site.pages.dev/posts/2022/06/test

Thanks in advance for any related help/info.

[ElMassimo]

Hi @brycewray!

The repo you've linked to seems to be private.

I don't recall experiencing this issue, as îles is relying on Vue to process styles as usual.

Perhaps the rule is being generated, but the p element is not in the component template, so the rule does not apply (as intended when using scoped styles).

Have you tried using .blueBox :deep(p) instead?

That will cause Vue to scope the .blueBox reference, but let the p referenced unscoped, so any p elements rendered inside children components would be styled as well.

[brycewray]

@ElMassimo — sorry, forgot I had the repo set to private. Now public.

The template just uses a <slot /> so am not sure whether that corresponds to what you mentioned. Anyway, you can see for yourself now and let me know if this is, indeed, the problem. Thanks for the quick reply!

[ElMassimo]

Yeah, that's definitely the case. I recommend reading about Deep Selectors in the Vue docs.

[brycewray]

@ElMassimo Thank you! Will do.