Migrating SCSS Imports to Use/Forward: Handling Shared Variables
question should be like,
i wanted to update my sass and remove the warning for import since its deprecating.
this is how my structure is.
all the scss inside of the components were being imported to style.scss like this below:
I need to update my Sass code to use the newer @use/@forward syntax instead of @import. My main concern is handling the _variables.scss file, which contains shared variables used across all components.
What's the best way to structure this with @use/@forward? Specifically:
1. Should I @use '_variables.scss' in each component file individually?
2. Or is there a more efficient way to share these variables across components without duplicating the @use statement?
3. What changes would I need to make to style.scss to properly load all components with their dependencies?
i wanted to update my sass and remove the warning for import since its deprecating.
this is how my structure is.
scss
┣ Component
┃ ┗ _variable.scss
┃ ┣ _reboot.scss
┃ ┗ _utilities.scss
┃ ┣ _card.scss
┃ ┗ _grid.scss
┃ ┣ _sidebar.scss
┃ ┣ _table.scss
┃ ┣ _button.scss
┃ ┣ _form.scss
┃ ┣ _container.scss
┃ ┣ _badge.scss
┃ ┗ _grid.scss
┗ style
┃ ┗ style.scssall the scss inside of the components were being imported to style.scss like this below:
//style.scss
@import "../components/variables";
@import "../components/reboot";
@import "../components/container";
@import "../components/grid";
@import "../components/badge";
@import "../components/tables";
@import "../components/forms";
@import "../components/buttons";I need to update my Sass code to use the newer @use/@forward syntax instead of @import. My main concern is handling the _variables.scss file, which contains shared variables used across all components.
What's the best way to structure this with @use/@forward? Specifically:
1. Should I @use '_variables.scss' in each component file individually?
2. Or is there a more efficient way to share these variables across components without duplicating the @use statement?
3. What changes would I need to make to style.scss to properly load all components with their dependencies?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
