Allow style scoping using <style lang="scss" src="file.scss"> with an external stylesheet

[flayks]

Body

Summary

(Originally started in an issue I created)

It'd be great to be allow style scoping for components, layouts and pages using <style src="file.scss">, to an external stylesheet like svelte-preprocess or even how Nuxt allows it with <style scoped src="./file.scss" lang="scss"> with the scoped and/or src options.

Background & Motivation

As components and layouts can become quite large, I personally use and see a pattern of having an external stylesheet to separate the template and the logic from the styles like so:

• src/components/organisms/Features/Features.astro
• src/components/organisms/Features/Features.scss

Since SASS 1.8, using @import is now deprecated. Therefore, we need to either import a stylesheet using

---
import './Component.scss'
---

but then, we lose the scoping in component/page/layout which is not ideal.

Or, with the recommended @use/@forward method, which requires to reimport the required variables/mixins/functions/etc in each stylesheet, defeating the purpose of the Vite config additionalData option:

// Features.astro
<style lang="scss">
    @use "./Features" as *;
</style>

// Features.scss
@use "../../styles/imports" as *;
// ... + styles

Goals

• Allow style scoping from an external stylesheet
• Avoid reimporting the required variables, mixins and functions in every single file
• Use additionalData from the Vite config to "inject" the required stuff into each file