相关疑难解决方法(0)

我正在研究一个遵循这种结构的 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 变量中，但是在构建项目时，它会引发另一个错误，指出 a$blue未定义。

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

您好，我在 scss 文件中有一些 scss 颜色定义：

$blue:                            #20a8d8;
$indigo:                          #6610f2 !default;
$purple:                          #6f42c1 !default;

$colors: (
  blue:                           $blue,
  indigo:                         $indigo,
  purple:                         $purple
)

并想在绘制 React js 图表时使用它们：

import React, { Component } from 'react';
import {CardColumns, Card, CardHeader, CardBlock} from "reactstrap";
import {Line} from "react-chartjs-2";

const dataA = {
  labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
  datasets: [
    {
      label: 'Number of Customers in Shop A',
      fill: false,
      lineTension: 0.1,
      backgroundColor: red
    }]
};

我尝试使用“红色”作为背景颜色，但失败并出现错误：

Uncaught ReferenceError: red is …

我有一些颜色定义的变量到_colors.scss文件中。

$color-succcess: #706caa;
$color-error: #dc3545;

我还想将它们用于一些样式化的 React 组件react-table到我的 js 文件中。

我使用以下文章https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript作为参考，还有许多其他人喜欢它，但我无法让它工作。

我从我的 scss 文件中导出颜色：

:export {
  colorSuccess: $color-succcess;
  colorError: $color-error;
}

我将它们导入到我的 js 文件中：

import colors from "../../styles/_colors.scss";

但他们可能没有正确加载。

我如何配置 create-react-app 生成的代码以实现与文章中的人使用 webpack 所做的相同的事情。