Add different style file

Author: fwh1990

package.json

@@ -21,6 +21,6 @@
     "@types/redux-logger": "^3.0.7",
     "redux-logger": "^3.0.6",
     "typescript": "^3.7.3",
-    "webpack-genius": "^4.7.6"
+    "webpack-genius": "^4.9.0"
   }
 }

src/components/App.styl

@@ -0,0 +1,3 @@
+.wrapper
+  flex-direction: row
+  display: flex

src/components/App.tsx

@@ -2,10 +2,11 @@ import React, { FunctionComponent } from 'react';
 import Normal from './Normal';
 import Request from './Request';
 import Summary from './Summary';
+import styles from './App.styl';
 
 const App: FunctionComponent = () => {
   return (
-    <div style={{ flexDirection: 'row', display: 'flex' }}>
+    <div className={styles.wrapper}>
       <Normal />
       <Request />
       <Summary />

src/components/Normal.scss

@@ -0,0 +1,13 @@
+.wrapper {
+  width: 300px;
+  height: 300px;
+  border-width: 1px;
+  border-color: #ddd;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 20px;
+  padding: 15px;
+}

src/components/Normal.tsx

@@ -1,19 +1,6 @@
-import React, { CSSProperties, FunctionComponent, useCallback } from 'react';
+import React, { FunctionComponent, useCallback } from 'react';
 import { counterModel } from '../models/CounterModel';
-
-const styles: CSSProperties = {
-  width: 300,
-  height: 300,
-  borderWidth: 1,
-  borderColor: '#ddd',
-  borderStyle: 'solid',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  margin: 20,
-  padding: 15,
-};
+import styles from './Normal.scss';
 
 const Normal: FunctionComponent = () => {
   const count = counterModel.useData((data) => data.amount);
@@ -27,7 +14,7 @@ const Normal: FunctionComponent = () => {
   }, []);
 
   return (
-    <div style={styles}>
+    <div className={styles.wrapper}>
       <h3>Normal Effect:</h3>
       <p>You clicked <span style={{ fontSize: 18, color: '#f00' }}>{count}</span> times.</p>
       <div>

src/components/Request.less

@@ -0,0 +1,13 @@
+.wrapper {
+  width: 600px;
+  height: 300px;
+  padding: 15px;
+  border-width: 1px;
+  border-color: #ddd;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 20px;
+}

src/components/Request.tsx

@@ -1,19 +1,6 @@
-import React, { CSSProperties, FunctionComponent, useCallback } from 'react';
+import React, { FunctionComponent, useCallback } from 'react';
 import { npmInfoModel } from '../models/NpmInfoModel';
-
-const styles: CSSProperties = {
-  width: 600,
-  height: 300,
-  padding: 15,
-  borderWidth: 1,
-  borderColor: '#ddd',
-  borderStyle: 'solid',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'center',
-  margin: 20,
-};
+import styles from './Request.less';
 
 const Request: FunctionComponent = () => {
   const npmInfo = npmInfoModel.useData();
@@ -39,7 +26,7 @@ const Request: FunctionComponent = () => {
   }, []);
 
   return (
-    <div style={styles}>
+    <div className={styles.wrapper}>
       <h3 style={{ textAlign: 'center', width: '100%' }}>Fetch Effect:</h3>
       <p>Package: {npmInfo._id || '--'}</p>
       <p>License: {npmInfo.license || '--'}</p>

src/components/Summary.css

@@ -0,0 +1,13 @@
+.wrapper {
+  width: 300px;
+  height: 300px;
+  padding: 15px;
+  border-width: 1px;
+  border-color: #ddd;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 20px;
+}

src/components/Summary.tsx

@@ -1,25 +1,12 @@
-import React, { CSSProperties, FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 import { summaryModel } from '../models/SummaryModel';
-
-const styles: CSSProperties = {
-  width: 300,
-  height: 300,
-  padding: 15,
-  borderWidth: 1,
-  borderColor: '#ddd',
-  borderStyle: 'solid',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'center',
-  margin: 20,
-};
+import styles from './Summary.css';
 
 const Summary: FunctionComponent = () => {
   const { times, lastTime } = summaryModel.useData();
 
   return (
-    <div style={styles}>
+    <div className={styles.wrapper}>
       <h3>Summary:</h3>
       <p>You have clicked buttons <span style={{ fontSize: 20, color: '#f00' }}>{times}</span> times.</p>
       <p>Last click time: </p>

webpack.config.ts

@@ -0,0 +1,3 @@
+import webpackGenius from 'webpack-genius';
+
+export default webpackGenius(3000);