在React

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

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

基本上，您可以使用优秀的sass-extract库以及sass-extract-loader和sass-extract-js插件将您的全局Sass变量作为主题对象添加到您的应用中。

Answer 2

变量在.scss或.sass中扮演着非常重要的角色，但功能无法扩展到文件之外。

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

Answer 3

如果这是一个老问题，请原谅我，但我想我会在需要时介绍如何将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 4

我建议使用ThemeProvider组件。我也从sass转向风格组件。使用样式组件的主题使用React的上下文api，非常好。请查看此文档Styled Components Theming。