使用 Scss 和 JS 变量对 React 项目进行主题化答案

【问题标题】：Theming a React project using Scss and JS variable使用 Scss 和 JS 变量对 React 项目进行主题化
【发布时间】：2021-01-31 12:37:26
【问题描述】：

有没有办法在 scss 文件中导入 javascript 变量？例如，我有这个 javascript 文件并想在我的 scss 文件中使用它。

// sky blue
const PRIMARY_COLOR = '#489FEF'    
export { PRIMARY_COLOR}

我想在我的 scss 文件中使用它

.sampleClassName { border: $PRIMARY_COLOR 3px solid }

我这样做的原因是我想为我的项目设置主题并使用 SCSS 对其进行样式设置。如果有任何更好的方法可以做到这一点，请告诉我。谢谢！

【问题讨论】：

【解决方案1】：

一种方法是使用styled components

const PRIMARY_COLOR = "#489FEF";

const Button = styled.a`
  border: ${PRIMARY_COLOR}
`;

不过，我不会使用这样的组件，I'd suggest making themes as shown here。

【讨论】：

【解决方案2】：

有一个包可以使用 node-sass 将导出的 JS 值解析并转换为 scss 类型。然后，您可以像任何其他 scss 文件一样将 js 文件 require 放入您的 scss 中。也适用于 Webpack。

【讨论】：