【css】react+typescript+css modules+sass 配置

1.在根目录下创建xxx.d.ts类型文件声明类型
global.d.ts

declare module '*.scss';

2.配置webpack
webpack.config.js

 {
     
     test: /css$/i,
     use: [
         'style-loader',
         {
     
             loader: 'css-loader',
             options: {
     
                 modules: true,
             },
         },
         'sass-loader',
     ],
 },

3.引入
a.scss

.title {
     
    font-size: 10rem;
    h1 {
     
        background-color: pink;
    }
}

Main.tsx

import React from 'react';
import styles from './a.scss';
console.log(styles);
const Main = () => {
     
    return (
        <div className={
     styles.title}>
            <h1>aaa</h1>
        </div>
    );
};
export default Main;