我正在尝试将 Styled-Components 慢慢引入我现有的代码库中，该代码库严重依赖全局 SASS 变量（导入到 a 中的部分main.scss）。
如何引用 SCSS 变量？以下不起作用：
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: $color-blue;
`;
export default Button;
我是否以错误的方式接近这个？
我写了一篇关于解决这个问题的文章。https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
本质上，您可以使用优秀的sass-extract库以及sass-extract-loader和sass-extract-js插件将全局 Sass 变量作为主题对象带入您的应用程序。
请原谅我，如果这是一个老问题，但我对我如何使用我的两个CSS变量以为我的芯片.scss，并styled-components在有需要时当。
基本用法：
声明一个全局变量（最好在_variables.scss）
:root {
--primary-color: #fec85b;
}
使用全局属性：
.button {
background-color: var(--primary-color);
}
或者
const Button = styled.button`
background-color: var(--primary-color);
`;
请注意双线--。
变量在.scssor 中起着非常重要的作用.sass，但功能不能扩展到文件之外。
相反，您必须创建一个单独的.js文件（例如： variable.js）并将所有变量定义为一个对象。
我建议使用 ThemeProvider 组件。我也在从 sass 转向样式化组件。Theming with styled-components 使用了 React 的 context api，非常好。查看此文档Styled Components Theming。