React【vite使用模块化css】
文章目录
- 前言
- 一、使用步骤
- 1.vite初始化react项目
- 2. 安装sass
- 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上