本文档详细介绍了在 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 文件的方案：
- 通过 Vite 配置文件：适用于需要在所有 SCSS 文件中共享变量和混合（mixins）的场景。
- 使用 styled-components：适用于需要动态生成全局样式或需要与 React 组件深度集成的场景。