Gatsby: Importing scss variables in js

[idjuradj]

I've tried using scss variables in .js files (in my components that is). So, I have one colors.scss files with my color palette, and I export some of those colors like this:

$white: rgb(255, 255, 255);
$blue: rgb(4, 50, 100);
:export {
  blue: $blue;
  white: $white
}

In the component I include these colors like
import colors from '../../styles/colors.scss'

and then use it like this
<MyComponent color={colors.blue} />

This works just fine in development mode. Ofc, I'm using gatsby-plugin-sass. But after I build it, it has no effect.
Is there something special I need to configure to make this work or ...?

[KyleAMathews]

What does console.log(colors) output in development and production?

I'm surprised this works in development as I didn't realize you could import variables from sass into javascript. Though I haven't used sass in 3+ years :-)

[idjuradj]

I also recently found this out (used this article as reference).

In dev, console log outputs an object:

{
bluePrimary: "#043264"
white: "white"
}

But after you run build and serve it as static version, console log outputs an empty object: {}

[KyleAMathews]

Huh interesting. Not sure why this is happening. But clearly either Sass, the sass-loader, or webpack is behaving differently in development vs. production. Could you research this issue in perhaps the sass-loader repo or elsewhere and try to find a solution?

[pieh]

I think fact gatsby-plugin-sass use null loader for sass files in build-html/build-javascript stage ( https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sass/src/gatsby-node.js#L45 ) might be responsible?

[fk]

I didn't realize you could import variables from sass into javascript

Dito…nice!

[KyleAMathews]

@pieh oh right! That's almost certainly it.

Hmmm not entirely sure what the implications would be to removing that — the reason for null-loader is so CSS doesn't end up in the JS bundles. Probably we'd have to use the sass-loader & still extract but throw away the extracted CSS.

[bogdancss]

I'm having the same issue - is there a fix for this?

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[derit]

same issue on development env
here for reproduce
i'm using plugin gatsby-plugin-sass

create a file with name mystyles.scss
the code
import styles from './mystyles.scss'

console.log(styles)

result

{ }

case two
in mystyles.scss create a styles

.mybutton{
backgroud:red
}

the code

import styles from './mystyles.scss'

<button className="mybutton" />

i think this a bug

mystyles.scss is loaded as global styles, background color of button with class mybutton is red,

expect no backgroud because styles as variable no imported as global like import './mystyles.scss'

[thatgriffith]

For anyone still looking for a solution. I added .module to the filename of my variables file: variables.scss --> variables.module.scss. Do not forget to also update paths wherever you are using it.

Hope this one can solve some headaches!

[M-Fasciano]

The way I fixed this issue is creating a Variables.js file. Then I've imported the variables and used it like so

import { colours } from '../Global/Variables'

const Copy = styled.p`
  color: ${colours.white};
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin: .5rem 0 0;
`