React【vite使用模块化css】

文章目录

• 前言
• 一、使用步骤
• • 1.vite初始化react项目
  • [2. 安装sass](#2. 安装sass)
  • [3. 增加声明文件](#3. 增加声明文件)
  • 4.配置ts.config.json
  • 5.使用
• 二、scss文件默认支持模块化，而无需加.module

---

前言

一般编写组件样式的时候我们都需要做对样式的模块化，以防止组件样式间的样式污染。

在vue中有hash限制选择器

.vue[as12xs4] {}

在react中有样式模块化

import style from "index.module.scss";

function com {
	return <div className={style.styleName}>txt</div>
}

---

一、使用步骤

1.vite初始化react项目

代码如下（示例）：

npm init vite@latest react-pro -- --template react-ts

---

2. 安装sass

npm i sass -D

---

3. 增加声明文件

在src同级目录下增加typings.d.ts

declare module "*.module.scss" {
	const classes:{[key:string]:string};
	export default classes;
}

---

4.配置ts.config.json

include:['src','./typings.d.ts']

---

5.使用

定义index.module.scss文件

//必须要有有效属性，空白类不抛出
.root {
	color:red;
}

组件使用

import style from "./index.module.scss";
function com(){
	return <div className={style.root}>red color</div>
}

---

二、scss文件默认支持模块化，而无需加.module

scss模块化的操作是由post-css这个插件去做的，可以自定义一个vite插件去实现，自己想要的模块化逻辑。后续作者也会编写一个对应的插件放在GitHub上