How to globally inject SCSS variables now that Sass has deprecated @import? #18388
Unanswered
adamdehaven
asked this question in
Q&A
Replies: 1 comment
-
I managed to get something working, but I can't say I love it. Vue componentsVue components can inherit Sass variables from the vite: {
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler',
additionalData: `
@use "sass:color";
// Add to the global Sass namespace
@use "my-package/tokens/scss/variables" as *;
`,
},
},
},
} Sass filesSeparate usage within // _layout.scss partial
@use "my-package/tokens/scss/variables" as *;
body {
color: $my-var;
} // app.scss
@use "layout"; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
How would you inject global SCSS variables into all Vue components, non-namespaced, in a project that utilizes Vite?
I have some SCSS variables that I would like to be available in all my Vue components within the project, as well as available in any
**/*.scss
files in the same project.The official docs recommend recommend utilizing
additionalData
as shown below, although doing so with the new@import -> @use
change doesn't seem to work.What I have below works if you change
@use
to@import
just fine, but not as-is.I started a related discussion in the sass repository in an issue that was already open (they don't really seem concerned with the Vite ecosystem or the repercussions of deprecating the existing
@import
functionality).Beta Was this translation helpful? Give feedback.
All reactions