Migrating to Styled-Components with global SASS variables in React

Question

I'm trying to slowly introduce Styled-Components into my existing codebase which relies heavily on global SASS variables (partials imported into a main.scss).

How do I reference the SCSS variables? The following doesn't work:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: $color-blue;
`;

export default Button;

Am I approaching this from the wrong way?

Answer 1

Variables play a very important role in .scss or .sass, but the functionality cannot be extended outside the file.

Instead, you have to create a separate .js file (For example: variable.js) and define all your variables as an object.

Answer 2

I wrote up an article about solving this very issue. https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

Essentially, you can use the excellent sass-extract library along with sass-extract-loader and the sass-extract-js plugin to bring your global Sass variables into your app as a theme object.