react scss [class*

在React中使用SCSS（Sassy CSS）时，特别是当你想要使用` scoped `属性以避免样式污染全局命名空间时，可以按照以下步骤操作：

1. **导入Scoped SCSS模块**[^1]:

// header.module.scss
.header-box {
  /* 在这里定义你的类 */
}

/* 使用嵌套选择器或`:global()`来指定作用域 */
.global-header {
  @apply .header-box;
}

2. **在组件中引入并应用样式**:

import React from 'react';
import headerStyle from './styles/header.module.scss';

export default class HeaderComponent extends React.Component {
  render() {
    return (
      <div className={`${headerStyle.globalHeader}`}>
        {/* 元素内容 */}
      </div>
    );
  }
}

在这个例子中，`.global-header`会应用`.header-box`中的样式，因为它们是在同一个`@apply`规则下定义的，所以不会影响到其他组件。

如果你想设置全局SCSS变量[^2]，可以在配置Webpack的CSS加载器时实现，比如：

{
  test: sassRegex,
  // ...
  use: [
    ...,
    {
      loader: "sass-loader",
      options: {
        // 在这里添加全局变量
        variables: {
          themeColor: "blue",
        },
        // ...
      },
    },
  ],
}

这样，你就可以在全局范围内通过`$themeColor`访问这个变量了。