react+vite安装sass

要在 React Vite 项目中使用 Sass，您需要安装 `sass` 和 `sass-loader` 依赖项。您可以使用以下命令来安装它们：

npm install sass sass-loader --save-dev

或者，如果您使用的是 Yarn 包管理器，则可以使用以下命令：

yarn add sass sass-loader --dev

安装完成后，您可以在 `vite.config.js` 文件中配置 Sass 支持。以下是一个简单的配置示例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import sass from 'sass';
import { sassPlugin } from './plugins/sass-plugin';

export default defineConfig({
  plugins: [react(), sassPlugin({ implementation: sass })],
});

其中，`sassPlugin` 是一个自定义插件，用于为 Vite 添加 Sass 支持。以下是 `sassPlugin` 的示例代码：

import { Plugin } from 'vite';
import sass from 'sass';

export function sassPlugin(options = {}): Plugin {
  return {
    name: 'sass',
    transform(code, id) {
      if (id.endsWith('.scss') || id.endsWith('.sass')) {
        const { css } = sass.renderSync({ ...options, data: code });
        return {
          code: `export default ${JSON.stringify(css.toString())}`,
          map: null,
        };
      }
    },
  };
}

完成配置后，您可以在 React 组件中导入 Sass 文件并使用它们。例如：

import React from 'react';
import './styles.scss';

function App() {
  return <div className="container">Hello, Sass!</div>;
}

export default App;