Some styles inside SASS modules won't apply unless wrapped in :global()
retr0cube opened this issue · 1 comments
retr0cube commented
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.