I am importing a variable file in every sass module would it affect my css bundle size?

Question

• I am using sass mixed with sass modules to scope styles for each component
• I found myself importing the variables file at every sass module
• I import by the new "@use"

would that make my final compiled css bundle bigger or sass handles it under the hood ?

also is there a better practice than adding the two lines importing the variables and mixins at every sass module it gets repetitive.

---

Answer 1

To answer first question: Compiled bundle size won't be bigger. SASS resolve variable references under the hood to map the values.(per my understanding with SASS ways of working)

To answer your second question: Try to have a look at the SMACSS on how to structure your presentation code. You can apply that structure to scss as well.

For e.g. essentials variables/mixins/extends can be clubbed in a utility file like _dependencies.scss and then include this one file rather including n number of imports.