在React中使用全局SASS变量迁移到样式化组件

Question

我试图将Styled-Components缓慢引入现有的代码库中，该代码库严重依赖于全局SASS变量（部分导入到中main.scss）。

如何引用SCSS变量？以下内容不起作用：

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

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

export default Button;

我是从错误的方式来处理这个问题吗？

Answer 1

请原谅我，如果这是一个老问题，但我对我如何使用我的两个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);
`;

请注意双线--。

Answer 2

变量在.scssor 中起着非常重要的作用.sass，但功能不能扩展到文件之外。

相反，您必须创建一个单独的.js文件（例如： variable.js）并将所有变量定义为一个对象。

Answer 3

我写了一篇有关解决这个问题的文章。https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

本质上，您可以使用出色的sass-extract库以及sass-extract-loader和sass-extract-js插件，将全局Sass变量作为主题对象引入应用程序。