Migrating to Styled-Components with global SASS variables in React

reactjs sass styled-components
skube picture skube · Mar 9, 2018 · Viewed 7.9k times · Source

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

Adam picture Adam · May 3, 2018

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.

Related questions

target first-child css styled-components

I am using styled-components and want to target the first child of Text, but am unable to do so. const Text = styled.p` font-size: 12px; &:first-child { margin-bottom: 20px; } `; ... component return( <div> <p>I am just …

Read More
Styled-Components vs SASS (SCSS) or LESS

I came across a ReactJS Boilerplate which had good reps and is community driven. Styling section emphasized more on styled component CSS but never stopped from switching to conventional CSS styling methodologies. Although this pulled my interests what makes the …

Read More
Module not found: Can't resolve 'style'

I am trying to configure css modules using sass. I have followed some tutorials but none seem to work. The webpack config was mostly created by create-react-scripts. I seemed to getting this error "Module not found: Can't resolve 'style'" Any …

Read More