React-redux-starter-kit: Correct way to use global variables defined in _base.scss inside components scss file?

[IljaDaderko]

Consider components scss located at src/components/myComponent/myComponent.scss how can I use a variable like $my-font-size that is defined in src/styles/_base.scss ? I can easily import that file, but wouldn't this result in css duplication and leade to increase in filesize

[davezuko]

The convention for _base.scss is that you _don't_ include any actual selectors, that way if you import it multiple times you do not create duplicate styles (otherwise yes, you'd be correct). You can also label variables as !default for them to be available in the global scope, meaning as long as _base.scss is imported first they will be available in subsequent stylesheets.

Hope that helps!

[davezuko]

Closing as resolved. Let me know if this is still unclear.

[netpoetica]

@davezuko This answer did clear things up a little bit (aka I am not afraid of duped styles now), but it is still unclear how this scaffolding supports either method. I think the use case that is failing to be considered here is this:

For a project, a developer would like to create file called palette.scss, which is imported in _base.scss and then the variables defined in palette file will be available to all subsequent modules. Right now, I will need to include palette.scss in every scss file that needs to use them.

Additionally, I was not able to get the !default post-fix to expose these variables globally as you described above.

I think in the Style portion of the README if you could just clarify how/where this scaffolding expect these items to be placed and implemented within the context of the other decisions/opinions of this scaffolding, that will probably save some headaches. I do believe the above is the most common use case for which there appears to be confusion. For me, including everywhere and relying on the build to dedupe is fine - but it is not clear whether or not that dedupe will occcur.

Cheers

[coolblabla]

+1

[mouhsinelonly]

+1 still waiting for a way to use global variables from styles folder in components

[woniesong92]

+1

[NoZiL]

+1

[ehteshamkafeel]

+1

[VillainJoKeR]

+1

[jclif]

+1

[tiagoalvesdulce]

+1

[newkolay]

+1

[jheissat]

+1

[atomdmac]

+1

[newkolay]

I found a solution, just make sassLoader like this

webpackConfig.sassLoader = {
  data: '@import "variables";',
  includePaths : project.paths.client('styles')
}

Now you can use your vars everywhere without importing them at the top of your files.