如何在我的 React 组件中使用 SCSS 变量 [英] How to use SCSS variables into my React components

问题描述

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

I am working on a React project that follows this structure

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

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

Into my variables file I was using the css custom variables so, all them where on :root and I can access them in my components styles.

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

When I wanted to create the dark colours I wanted to use the SCSS function darken, but it does not evaluate them and throws an error saying that var(--blue) is not a valid colour.

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

As a solution I decided to move all the variables into a SCSS variables but when project is building it throws another error that says that a $blue is not defined.

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

The unique solution possible I can use, it is to include the variables file in all the styles files but, I do not know if there are a better solution for the structure that I am using.

推荐答案

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

If you don't want to use styled-component then you can follow this link. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

这篇关于如何在我的 React 组件中使用 SCSS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！