创建项目

一、项目初始化配置

一、项目初始化

1. 创建项目

npm create vite@latest react-hook

C:\code>npm create vite@latest react-hook
Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y) y
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in C:\code\react-hook...

Done. Now run:

  cd react-hook
  npm install
  npm run dev

2. 安装依赖包

npm i
npm i sass -D
npm i react-router-dom -S

3. 启动配置 package.json

scripts": {
    "dev": "vite --host --port 3002 --open",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

二、配置 sass

1. 创建文件 src\styles\sassConfig.scss

$red: red;

2. vite 引入 vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/sassConfig.scss";`,
      },
    },
  },
});

3. App.css 改为 App.scss

h1 {
  color: $red;
}

4. App.tsx 查看效果

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.scss";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>app</h1>
    </div>
  );
}

export default App;