如何在我的 React 组件中使用 SCSS 变量

Posted 2023-02-21

【中文标题】如何在我的 React 组件中使用 SCSS 变量

【英文标题】：How to use SCSS variables into my React components

【发布时间】：2019-03-24 19:24:24

【问题描述】：

我正在开发一个遵循这种结构的 React 项目

src |
  components |
    Footer |
      index.jsx
      styles.scss
    Header |
      index.jsx
      styles.scss
    scss |
      helpers.scss
      variables.scss
      ...
    main.scss

在我的变量文件中，我使用了css 自定义变量，所以它们都在:root 上，我可以在我的组件样式中访问它们。

当我想创建深色时，我想使用 SCSS 函数 darken，但它不会评估它们并抛出错误，指出 var(--blue) 不是有效颜色。

作为解决方案，我决定将所有变量移动到 SCSS 变量中，但是在构建项目时会引发另一个错误，指出未定义 $blue。

我可以使用的唯一解决方案是将变量文件包含在所有样式文件中，但是我不知道是否有更好的解决方案来解决我正在使用的结构。

【问题讨论】：

我知道这个问题已经存在 3 年了，但任何寻找最新解决方案的人都可能会发现 my answer to a similar question 很有帮助，因为它解决了 css-loader 的必要选项。

【参考方案1】：

来自 React 17

要将你的 scss 变量访问到 react 组件中，你需要做类似的事情

将node-sass 安装为依赖项或开发依赖项 无需在 webpack 中进行任何配置更改 作为模块导入

variables.module.scss

$color: skyblue;
$primaryColor: red;

:export 
    color: $color;
    primary-color: $primaryColor;

App.js

import variables from '<YOUR_PATH>/variables.module.scss';

const App = () => 
    console.log(variables);

【参考方案2】：

如果你不想使用styled-component 那么你可以点击这个链接。 https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

【参考方案3】：

可以使用css-vars mixin 将自定义变量与该项目结构一起使用。

在提出在执行 SCSS 函数之前评估自定义变量的选项后，一个人向我推荐了这个 mixin。我刚刚测试过，效果很好。

【参考方案4】：

我使用类似的结构来组织我的 .scss 文件。我喜欢将样式与组件放在同一个文件夹中。但是，我将所有 scss 文件导入到我的 main.scss 文件中。这有助于避免 DOM 中的样式冲突。

main.scss

import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"

确保使用下划线命名您的文件，以便所有文件在编译时合并。请注意，您不需要在导入中命名下划线。

_helpers.scss
_variable.scss
_style.scss

使用此方法，您只需将样式导入您的应用一次。 index.jsx

【讨论】：

这样做允许使用代码拆分吗？如果您有一个非常大的项目会怎样？

我对非常​​大的项目执行此操作。我喜欢在它们的组件旁边放一些小的 scss 文件。就性能而言。我在其他系统中发现通常存在 DOM 冲突，其中一种 CSS 样式会覆盖另一种。使用 partials 不会在 DOM 中覆盖样式。

【参考方案5】：

我可以推荐你解决这个问题的不同方法。

1- 复制这些变量的值。将它们添加到您的 variables.scss 和其他文件中的常量，可能是 config.js 或 constants.js 这样您就可以从您的反应组件中引用这些值，这样做的缺点是您将拥有如果必须修改值，请记住在两个地方更改它们。

2- 考虑使用styled-components。使用样式化组件，您可以在组件中定义样式，使用样式中的变量或道具。

3- 使用某种机制将这些变量定义在单个文件中或作为环境变量，并设置您的构建过程以便能够将这些值导入到 js 和 scss 文件中。

【讨论】：

我会研究样式化的组件。

第一个选择是不好的建议！