如何在我的 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

我可以向您推荐多种不同的方法来解决这个问题。

1- 复制这些变量的值。将它们添加到您的 variables.scss 和其他文件中的常量，可能是 config.js 或 constants.js 这样您就可以从您的 React 组件中引用这些值，这是不利的, 是不是要修改值的时候要记得改两处。

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

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

Answer 2

我使用类似的结构来组织我的 .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 3

可以使用 css-vars mixin 在该项目结构中使用自定义变量。

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

Answer 4

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

Answer 5

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

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

How to use SCSS variables into my React components

sass

reactjs

node-sass