And here's an option with creating an additional 'global-imports.scss' file to use across the different component scss, or to import globally through webpack.
sassStyles/_global-imports.scss:
@import './variables';
@import './mixins';
nominationContainer.scss
@import '../../../sassStyles/global-imports';
Variables (sass variables) and mixins are sass constructs that are not rendered as css on their own, so including them multiple times will not result in duplicated css.
Animations, however, are css definitions, so importing the animations partial multiple times across components would duplicate the css. However, there's no need to import animations into the component file to use them in the app. It would be enough to import the animations a single time into a main.scss / main.css file that is included in the app at the top level, and the browser would have those keyframe definitions loaded in and any other css that refers to it would work.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
if we import variables/mixins in multiple files it may duplicate the same CSS in multiple files. Is it an optimized solution?
My thought too... There should be a way to import all variables/mixins globally so all other scss files can reference it
This is exactly the issue, I'm facing. I am tempted to use for global variables and scss for the rest.
There are ways to configure webpack to do it (stackoverflow.com/questions/355334..., dev.to/dennisfrijlink/comment/19dh5)
And here's an option with creating an additional
'global-imports.scss'file to use across the different component scss, or to import globally through webpack.sassStyles/_global-imports.scss:nominationContainer.scssVariables (sass variables) and mixins are sass constructs that are not rendered as css on their own, so including them multiple times will not result in duplicated css.
Animations, however, are css definitions, so importing the animations partial multiple times across components would duplicate the css. However, there's no need to import animations into the component file to use them in the app. It would be enough to import the animations a single time into a
main.scss / main.cssfile that is included in the app at the top level, and the browser would have those keyframe definitions loaded in and any other css that refers to it would work.