reactjs - 如何在创建React应用程序中使用scss变量？

Question

我使用 create-react-app 创建应用程序，并尝试使用共享的 scss 文件。我有一个包含文件 common/styles/ 的文件夹。我那里还有一些 scss 文件(_reset.scss、_variables.scss)。

我的_variables.scss:

$color-main: #1E700F;

我的index.scss:

@import "variables";

然后我连接我的 index.scss 和我的 index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import './common/styles/index.scss';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

然后我在文件夹 common/components/Button 中创建 Button 组件。我想在我的 Button.scss 中使用下一个代码:

.button {
  border: 1px solid $color-main;
  color: $color-main;
}

将 Button.scss 导入 Button.js 文件后，出现下一个错误:

SassError: Undefined variable: "$color-main".

Answer 1

您不应该在 js 文件中导入 scss。相反，在您的 scss 中创建一个子文件夹并将其命名为 Components。然后创建一个特定于此类组件的 scss 文件，该组件对您来说是“按钮”。然后将其像这样导入到您的index.scss中

@import "variables";
@import "reset";
@import "components/button" <-- your button scss should be under the variables