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

Question

我正在开发一个遵循这种结构的 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。

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

Answer 1

来自 React 17

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

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

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);
}

Answer 2

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

Answer 3

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

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

Answer 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

Answer 5

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

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

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

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