如何在JSX中引入Scss

在 JSX（通常与React一起使用）中引入SCSS样式表的方法有几种，具体取决于项目的配置和个人喜好。以下是其中两种常见的方法：

1. 使用普通的 import 语句：

假设你有一个名为 styles.scss 的SCSS文件，你可以在React组件文件中这样引入：

import React from 'react';
import './styles.scss'; // 根据文件路径调整

const MyComponent = () => {
  return (
    <div className="my-component">
      {/* Your component content */}
    </div>
  );
}

export default MyComponent;

在这里，假设 styles.scss 和你的React组件文件在同一目录中。如果不在同一目录，确保调整相对路径。

2. 使用CSS Modules：

CSS Modules 是一种将样式模块化的技术，允许你在React组件中引入样式并确保局部作用域。通常，CSS Modules 的文件名以 .module.scss 或 .module.css 结尾。

// styles.module.scss

.myComponent {
  background-color: #3498db;
  color: #fff;
}

// MyComponent.jsx

import React from 'react';
import styles from './styles.module.scss'; // 根据文件路径调整

const MyComponent = () => {
  return (
    <div className={styles.myComponent}>
      {/* Your component content */}
    </div>
  );
}

export default MyComponent;

在这里，styles 是一个包含导入的样式的对象，你可以使用它来引用样式类名。确保文件以 .module.scss 结尾，以启用CSS Modules。