相关疑难解决方法(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未定义。

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

我关注了这篇文章如何在我的 React 组件中使用 SCSS 变量或这个React 和 SCSS 从 scss 导出一个变量以做出反应以在我的 React 应用程序中获取 scss 变量，但它不起作用。
myvar.scss文件：

$color: red;

:export {
    color: $color;
}

.myclass {
  background-color: $color;
}

App.js文件：

import variables from './myvar.scss';

const App = () => {
    console.log(variables);
    return <div className="myclass">Hello</div>
}

export default App;

div 背景是红色的，所以 myvar.scss 正在工作。但是variables是一个空对象。

（反应版本：17.0.1）

node_modules\react-scripts\config\webpack.config.js

module: {
  strictExportPresence: true,
  rules: [
    { parser: { requireEnsure: false } },
    {
      oneOf: [
...
        {
          test: sassRegex, …