vite创建react项目+scss+CSS Modules

首先，确保你的电脑已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查是否安装成功

node -v
npm -v
如果显示了对应的版本号，则说明安装成功。

官方维护的Vite+React脚手架（推荐）

1.创建

yarn create vite myApp --template react-ts
// 不需要ts 最后直接react就行

官方推荐的Vite+React脚手架

1.安装Vite。在命令行中运行以下命令来全局安装Vite

npm install -g create-vite
或
yarn global add create-vite   

2.创建一个新的Vite项目。在命令行中运行以下命令来创建一个新的Vite项目

create-vite my-react-app --template react

创建ts项目
create-vite my-react-app --template react-ts

这将会创建一个名为my-react-app的文件夹，并且基于React模板进行初始化。

3.进入新创建的项目文件夹。在命令行中运行以下命令来进入项目文件夹

cd my-react-app

4.最后，运行以下命令来安装项目依赖

npm install
或
yarn

5.启动

npm run dev

如何设置路径别名

1.增加alias

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve:{
    alias: {
      '@': '/src',
    },
  }
});

2.配置tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }

使用scss

Sass 有两种语法格式，1.使用括号的.scss 2.使用“缩进” 代替 “花括号的.sass
第一种.scss更符合css，所以我们使用.scss

首先安装sass

yarn add sass

修改css文件名为.scss

app.scss

//在js文件中引入scss
import './app.scss'

使用CSS Modules

在Vite项目中，CSS Modules是默认启用的，所以你无需额外的配置

1.修改scss文件名为 App.module.scss

2. 在js中引入

import styles from './App.module.scss'

3.使用

<div className={styles.apps}>App</div>

本文转自 zhuanlan.zhihu.com/p/662058599，如有侵权，请联系删除。