【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;