sass/sass

Some styles inside SASS modules won't apply unless wrapped in :global()

retr0cube opened this issue · 1 comments

Hi! I have this sass file here:

html:lang(ar)
	direction: rtl 
body 
	margin: 0
	color: --text-color

both of these won't apply unless they're in :global(), considering I use Sveltekit w/ Vite and SASS detects errors in all files and components they should be global, right?
This is how I import the SASS Module:

import inlangPlugin from "@inlang/sdk-js/adapter-sveltekit";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import path from 'path'

export default defineConfig({
  plugins: [inlangPlugin(), sveltekit()],
  // https://stackoverflow.com/questions/75056422/how-to-use-vitepreprocess-with-global-scss-mixins-in-sveltekit
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `@use '$lib/styles/_app' as *`,
      },
    },
  },
});
nex3 commented

Sass is just a tool for generating CSS. It doesn't have anything to do with web components or :global() beyond generating CSS that may or may not reference them depending on your Sass input. Unless the CSS being generated here is wrong, this sounds like an issue with Sveltekit or Vite.