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

最新推荐文章于 2024-09-18 14:52:34 发布

Adasunshine

最新推荐文章于 2024-09-18 14:52:34 发布

阅读量3.2k

点赞数 1

分类专栏： react 文章标签： javascript react.js css

本文链接：https://blog.csdn.net/FormAda/article/details/126232975

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、安装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}>123</div> 
    </div>
  );
};

export default Container;