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

@santosh Kumar 技术不起作用。

要将您的 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或css-vars， 那么您可以点击此链接。 https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Answer 3

有多种方法可以建议您解决此问题。

1-复制这些变量的值。将它们既添加到您的variable.scss中，又添加为其他文件中的常量，可能是config.js或constants.js，这样您就可以从react组件中引用这些值，这是您的缺点记住如果必须修改该值，请在两个地方进行更改。

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

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

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

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

在提出了在执行SCSS函数之前对自定义变量求值的选项之后，一个人向我建议了这种混合方法。我刚刚测试过，效果很好。