I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly.
Within my Vite configuration, I have included the following to import my styling:
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "./src/styles/main.scss";
`
}
}
}
Inside my main.scss file, I have defined the following:
:root {
--test: #ff0000;
}
* {
background-color: var(--test);
}
Upon inspecting the code output, I notice that it displays '--test is not defined' when hovering over the variable.
Strangely, removing the variable and directly assigning background-color: #ff0000 works without any issues. It appears that the :root variables are not being properly registered.
What might be causing this problem?