jsx使用 scss

在使用 JSX 的 React 项目中，可以使用 SCSS 作为样式文件的语法。为了使用 SCSS，需要在项目中安装 node-sass 和 sass-loader 两个依赖项。

1. 安装依赖：

npm install node-sass sass-loader --save-dev

2. 在 webpack 配置文件中添加 SCSS 的 loader：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        {
          loader: "style-loader"
        },
        {
          loader: "css-loader"
        },
        {
          loader: "sass-loader"
        }
      ]
    }
  ]
}

3. 在 JSX 文件中引入 SCSS 文件：

import React from 'react';
import './styles.scss';

function MyComponent() {
  return (
    <div className="my-component">
      <h1>Hello World</h1>
      <p>This is my component.</p>
    </div>
  );
}

export default MyComponent;

4. 在 SCSS 文件中编写样式：

.my-component {
  background-color: #f0f0f0;
  padding: 20px;

  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
  }
}

这样，就可以在 JSX 文件中使用 SCSS 语法编写样式了。