使用 React Styled-Components 导入 scss 变量的最佳方法？

Question

在普通的 React 组件中，如果你有 scss，你可以将其他 scss 文件导入其中并获得对 scss 变量的访问权限，例如 $color-primary: blue...

使用样式化组件执行此操作的最佳方法是什么？

假设我有一些我想使用的应用程序的主要变量：字体大小、字体系列、颜色等。我希望能够将它们导入 React 组件并在该文件的样式组件？

我知道您可以在每个单独的文件中设置变量并使用它们，但这违背了 "global variables" 和使用它们的目的。

从技术上讲，我知道样式化组件不是 scss，因此您可能甚至无法导入 scss 文件并使用其中的变量 - 那么您如何拥有所有样式化的全局变量-组件文件可以导入使用吗?

Answer 1

我想你想要的是一个令牌文件，令牌用于组织"variable"，描述你设计系统中的一个属性，https://www.lightningdesignsystem.com/design-tokens/#site-main-content.

幸运的是，这在 javascript 世界中可以非常简单地完成。几乎你只需要创建一个文件，在其中声明所有这些常量，然后导出它并在你想做的地方使用它：

我可以为您提供一个简单的解决方案：

// tokens.js

const tokens = {
  colorGray1: "#FF1100",
  colorGray2: "#CCC",
  colorGray3: "#DDD",
  colorGray4: "#EEE",
  colorBackgroundBlack: "#000",
}

export default tokens;

// app.js
import React from "react"
import styled from "styled-component";
import tokens from "./tokens.js" // this is somewhere in your app

const StyledComponent = styled.div`
  color: ${tokens.colorGray1},
  background: ${tokens.colorBackgroundBlack}
`

export default function MyComponent() {
  return <StyledComponent>This has grey color and black background</StyledComponent>
}

此外，styled-component 有一个非常好的名为 polish 的库，它模拟 sass 通常提供的混合和功能 https://polished.js.org/

祝你好运！

Answer 2

回答："how do you have global variables that all styled-components files can import and use?"

您应该设置一个，它可以通过 ThemeProvider 在整个应用程序中共享。

在那之后，也许有一些神奇的地方，您可以将现有的 scss 变量导入到启动 theme 的文件中，并根据需要分配那些现有的变量....但是，TBH，我只是坚持使用 theme 并终止 scss（样式组件 FTW）

Answer 3

有一些 webpack 加载器可以加载 scss 文件并将 scss 变量转换为 js 对象。我用过 sass-values-loader

import styles from './style.scss';
import vars from '!!sass-vars-to-js-loader!./style.scss';

console.log(vars.colorPrimary);

使用 React Styled-Components 导入 scss 变量的最佳方法？

Best method of importing scss variables with React Styled-Components?

sass

reactjs

styled-components