Best method of importing scss variables with React Styled-Components?

Question

In normal React components if you have scss, you can import other scss files into them and gain access to scss variables like $color-primary: blue...

What's the best method of doing that with styled-components?

Lets say I have some main variables for the app I want to use: font-size, font-family, colors, etc. And I want to be able to import those into a React Component and use them in the styled components of that file?

I know you can set variables in each individual file and use them, but that defeats the purpose of having "global variables" and using them.

Technically I know styled-components aren't scss, so you probably can't even import a scss file and use the variables from it - so how do you have global variables that all styled-components files can import and use?

Answer 1

I think what you want to have is a tokens file, tokens are used to organize "variable" that describe a property in your design system, https://www.lightningdesignsystem.com/design-tokens/#site-main-content.

Luckily for you, this can be accomplished pretty simple in the javascript world. pretty much you only have to create a file where you declare all these constants and then export it and consume it where you want to do it:

I can offer you a simple solution:

// tokens.js

const tokens = {
  colorGray1: "#FF1100",
  colorGray2: "#CCC",
  colorGray3: "#DDD",
  colorGray4: "#EEE",
  colorBackgroundBlack: "#000",
}

export default tokens;

// app.js
import React from "react"
import styled from "styled-component";
import tokens from "./tokens.js" // this is somewhere in your app

const StyledComponent = styled.div`
  color: ${tokens.colorGray1},
  background: ${tokens.colorBackgroundBlack}
`

export default function MyComponent() {
  return <StyledComponent>This has grey color and black background</StyledComponent>
}

also, styled-component has a really good library named polish that emulates mixing and function that sass normally provides https://polished.js.org/

Good luck!

Answer 2

To answer: "how do you have global variables that all styled-components files can import and use?"

You should setup a Theme that can be shared throughout your application via a ThemeProvider.

After that perhaps there's some magic where you can import your existing scss variables into the file where your theme is initiated and assign those existing vars as needed.... but TBH, I'd just stick to using a theme and kill scss (styled-component FTW)

Answer 3

There are a few webpack loaders that will load a scss file and convert the scss variables to a js object. I've used sass-values-loader

import styles from './style.scss';
import vars from '!!sass-vars-to-js-loader!./style.scss';

console.log(vars.colorPrimary);