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

最新推荐文章于 2024-12-12 09:29:00 发布

原创最新推荐文章于 2024-12-12 09:29:00 发布 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #css

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vite项目中安装并配置Sass，实现全局样式引用及模块化SCSS文件的使用。通过具体步骤和代码示例，帮助读者快速上手。

一、安装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;