typescript-react-css-modules-demo

Author: freewind

src/hello.css

@@ -0,0 +1,4 @@
+.title {
+  font-size: 40px;
+  color:red;
+}

src/hello.tsx

@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
+import React, {FC} from 'react';
+import styles from './hello.css';
 
-type Props = {};
-
-export const Hello: FC<Props> = ({}) => {
+export const Hello: FC = () => {
   return <div>
-    <h1>Hello React</h1>
+    <h1 className={styles.title}>Hello React</h1>
   </div>;
 }

webpack.config.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack';
+import {Configuration} from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
 
@@ -18,7 +18,11 @@ const config: Configuration = {
       test: /\.tsx?$/,
       loader: 'ts-loader',
       exclude: /node_modules/
-    }]
+    }, {
+      test: /\.css$/,
+      loader: ['style-loader', 'css-loader'],
+    }
+    ]
   },
   plugins: [
     new HtmlWebpackPlugin() as any