在 React 中使用全局 SASS 变量迁移到 Styled-Components答案

【问题标题】：Migrating to Styled-Components with global SASS variables in React在 React 中使用全局 SASS 变量迁移到 Styled-Components
【发布时间】：2018-08-18 09:05:33
【问题描述】：

我正在尝试将 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;

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

【问题讨论】：

您将无法访问 SASS 文件之外的 SASS 变量。相反，您必须在某个常量文件中将它们定义为对象。

标签： reactjs sass styled-components

【解决方案1】：

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

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

【讨论】：

很棒的文章，感谢您抽出宝贵的时间！ :) 我只是建议保持文件名之间的一致性，以便于理解。在您的代码 sn-p 中，当您创建 const theme = ... 变量时，SASS 文件名是 vars.scss，但在文章后面您提到了一个名为 variables.scss 的文件。作为我的新手，我不确定是否应该用我的文件名替换 vars.scss 或者它是否是一些特定于命令的路径:)

【解决方案2】：

如果这是一个老问题，请原谅我，但我想我会在需要时为我的 .scss 和 styled-components 使用 CSS 变量。

基本用法：

声明一个全局变量（最好是_variables.scss）

:root {
    --primary-color: #fec85b;
}

使用全局属性：

.button {
    background-color: var(--primary-color);
}

或

const Button = styled.button`
    background-color: var(--primary-color);
`;

请注意双线--。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我推荐使用 ThemeProvider 组件。我也在从 sass 转向风格化的组件。 Theming with styled-components 使用 React 的 context api 并且非常好。查看此文档Styled Components Theming。

【讨论】：