本文档详细介绍了在 React 19 项目中使用 Vite 作为构建工具时，如何配置全局的 SCSS 文件。提供了两种方案：一种是通过 Vite 配置文件直接引入全局 SCSS 文件，另一种是使用 styled-components 来设置全局样式。

方案1：在vite.config.js中配置全局 SCSS 文件

步骤1：创建全局 SCSS 文件

首先，在项目的 src/assets/styles/ 目录下创建一个名为 variables.scss 的文件。该文件将用于定义全局的 SCSS 变量和样式。

// src/assets/styles/variables.scss
$primary-color: #1677ff;
$secondary-color: #888;

步骤2：配置vite.config.js

在 vite.config.js 文件中，通过 css.preprocessorOptions 配置项来引入全局的 SCSS 文件。具体配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  plugins: [
    react(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "/src/assets/styles/variables.scss" as *;`,
      },
    },
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
          ],
        }),
      ],
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(new URL(import.meta.url).pathname, "src"),
    },
  },
});

配置解析

• css.preprocessorOptions.scss.additionalData：该配置项用于在所有的 SCSS 文件编译之前，自动注入指定的 SCSS 文件内容。在这里，我们引入了 variables.scss 文件，并使用 @use 指令将其内容应用到所有 SCSS 文件中。
• postcss：配置了 autoprefixer 插件，用于自动添加浏览器前缀，确保样式在不同浏览器中的兼容性。
• resolve.alias：配置了路径别名 @，指向 src 目录，方便在项目中引用文件

方案2：使用styled-components设置全局样式

步骤1：创建全局样式组件

在
src/components/GlobalStyle/GlobalStyle.jsx 文件中，使用 styled-components 创建一个全局样式组件。

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body, div, span, img, p, h1, h2, h3, h4, h5, h6, text, textarea {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  /* 修改滚动条的宽度和颜色 */
  ::-webkit-scrollbar {
    width: 0px;
    // background-color: #1677ff;
    // border-radius: 8px;
  }

  /* 修改滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 8px;
  }

  /* 修改滚动条滑块在hover状态下的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
`;

export default GlobalStyle;

步骤2：在main.jsx中引入全局样式组件

在项目的入口文件 main.jsx 中，引入并使用 GlobalStyle 组件。

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
import GlobalStyle from './components/GlobalStyle/GlobalStyle';

createRoot(document.getElementById("root")).render(
  
    
    
  
);

配置解析

• createGlobalStyle：styled-components 提供的 API，用于创建全局样式。这些样式将应用于整个应用。
• GlobalStyle 组件：定义了全局的样式规则，包括重置 body、div 等元素的默认样式，以及自定义滚动条的样式。
• main.jsx：在应用的根组件中引入 GlobalStyle 组件，确保全局样式生效。

总结

本文提供了两种在 React 19 + Vite 项目中配置全局 SCSS 文件的方案：

1. 通过 Vite 配置文件：适用于需要在所有 SCSS 文件中共享变量和混合（mixins）的场景。
2. 使用 styled-components：适用于需要动态生成全局样式或需要与 React 组件深度集成的场景。