【css】react+typescript+css modules+sass構成
1.ルートディレクトリの下にxxxを作成する.d.tsタイプファイル宣言タイプglobal.d.ts
2.webpack webpackを構成する.config.js
3.a.scssの導入
Main.tsx
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;