create-react-app 中的全局 scss 变量

CSS

使用create-react-app创建的React项目，可以很方便地使用全局sCSS变量来统一管理样式。这样做的好处是，我们可以在整个项目中使用同一套颜色、字体、间距等样式，方便进行整体的调整和维护。

在create-react-app中使用全局sCSS变量的方法很简单。首先，在src目录下创建一个名为variables.sCSS的文件，用于存放全局的sCSS变量。然后，在需要使用这些变量的组件中，通过import语句引入该文件即可。

下面是一个简单的例子，展示了如何使用全局sCSS变量来定义按钮的样式：

首先，在src目录下创建variables.sCSS文件，定义一个全局的主题颜色变量：

sCSS
$primary-color: #1890ff;

然后，在需要使用该主题颜色的按钮组件中，使用import语句引入variables.sCSS文件，并在样式中使用该变量：

JSx
import React from 'react';
import './Button.sCSS'; // 引入样式文件
const Button = () => {
  return (
    <button className="button">按钮</button>
  );
};
export default Button;

接下来，在Button.sCSS文件中定义按钮的样式，使用全局的主题颜色变量：

sCSS
@import 'variables';
.button {
  background-color: $primary-color;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

这样，我们就可以在整个项目中使用这个Button组件，并且它的样式会根据全局的主题颜色变量来进行调整。如果我们需要修改主题颜色，只需在variables.sCSS文件中修改$primary-color的值即可，无需逐个修改每个使用了该颜色的组件。

案例代码

上述例子中，我们使用了全局sCSS变量来定义按钮的样式。这样做的好处是，我们可以在整个项目中统一管理样式，方便进行整体的调整和维护。

首先，在src目录下创建variables.sCSS文件，定义一个全局的主题颜色变量$primary-color。

然后，在需要使用该主题颜色的按钮组件中，使用import语句引入variables.sCSS文件，并在样式中使用$primary-color变量。

接下来，在Button.sCSS文件中定义按钮的样式，使用全局的主题颜色变量$primary-color。

这样，我们就可以在整个项目中使用这个Button组件，并且它的样式会根据全局的主题颜色变量来进行调整。如果我们需要修改主题颜色，只需在variables.sCSS文件中修改$primary-color的值即可，无需逐个修改每个使用了该颜色的组件。

：

通过使用create-react-app中的全局sCSS变量，我们可以更方便地管理项目中的样式。只需在variables.sCSS文件中定义全局的样式变量，然后在需要使用的组件中引入该文件，并使用变量来定义样式。这样做可以大大提高开发效率，同时也方便了样式的维护和调整。