Реализуйте переменные S CSS при использовании Styled-Components

Question

Можно ли использовать s css с Styled-Components ?

Например, у меня есть файл variables.scss:

/**** Colors ****/
$aqua: #00abbd;

И Я хочу использовать переменную в моем компоненте Card:

import React from "react"
import styled from "styled-components"
import styles from "../variables.scss"

const CardContainer = styled.div`
  border: 3px solid $aqua;
`

const Card = () => {
  return (
    <CardContainer>
      <p>Card content</p>
    </CardContainer>
  )
}

export default Card

В настоящее время это не работает.