在create-react-app + react中配置sass并使用全局变量

要在create-react-app中配置sass并使用全局变量，需要进行以下步骤：

1. 安装node-sass和sass-loader
在项目根目录下使用以下命令安装这两个依赖：

npm install node-sass sass-loader --save-dev

2. 在webpack配置中启用sass
在项目根目录下找到config文件夹，找到webpack.config.dev.js和webpack.config.prod.js文件，分别进行以下操作：

- 在module.rules中添加对sass文件的处理：

{
  test: /\.scss$/,
  use: [
    {
      loader: "sass-loader",
      options: {
        implementation: require("node-sass")
      }
    }
  ]
}

3. 全局变量
在src文件夹中创建一个variables.scss文件，并在其中定义要使用的全局变量，例如：

$primary-color: #007bff;

body {
  background-color: $primary-color;
}

4. 在组件中使用sass文件
在需要使用sass文件的组件中，使用import语句导入变量和样式：

import './MyComponent.scss';
import variables from './variables.scss';

然后就可以在组件中正常使用定义好的全局变量和样式了：

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1 style={{ color: variables.primaryColor }}>Hello World</h1>
    </div>
  );
};

这样就可以在create-react-app中配置sass并使用全局变量了。