react+vite配置module.scss(css in js)

一、安装sass

yarn add scss

二、配置vite

vite.config.ts:

添加scss配置，将路径改为公共scss样式文件路径

scss: {
        additionalData: "@import './src/style/index.scss';", // 全局公共样式
      },

 三、使用方法

index.module.scss：

  .content{
    .header{
      width: 100%;
      height: 60px;
      background: $bgColor; 
      color: #fff;
    }
  }

index.tsx:

引入文件

import React from "react";
import styles from "./index.module.scss"; //引入文件
 
const Container: React.FC = () => {
  return (
    <div className={styles.content}>
      <div className={styles.header}>123div> 
    div>
  );
};
 
export default Container;