6 жил өмнө · f4f6f98128
--- a/package.json
+++ b/package.json
@@ -19,7 +19,14 @@
 
				   },
			
 
				   "homepage": "https://github.com/Johnhong9527/react-ts#readme",
			
 
				   "devDependencies": {
			
 
				+    "css-loader": "^2.1.1",
			
 
				     "html-webpack-plugin": "^3.2.0",
			
 
				+    "node-sass": "^4.12.0",
			
 
				+    "sass": "^1.20.1",
			
 
				+    "sass-loader": "^7.1.0",
			
 
				+    "sass-resources-loader": "^2.0.0",
			
 
				+    "style-loader": "^0.23.1",
			
 
				+    "sugarss": "^2.0.0",
			
 
				     "ts-loader": "^6.0.0",
			
 
				     "typescript": "^3.4.5",
			
 
				     "webpack": "^4.31.0",
			
@@ -27,6 +34,8 @@
 
				     "webpack-dev-server": "^3.3.1"
			
 
				   },
			
 
				   "dependencies": {
			
 
				+    "@material-ui/core": "^3.9.3",
			
 
				+    "@material-ui/icons": "^3.0.2",
			
 
				     "@types/react": "^16.8.17",
			
 
				     "@types/react-dom": "^16.8.4",
			
 
				     "react": "^16.8.6",
			
--- a/src/components/Hello.scss
+++ b/src/components/Hello.scss
@@ -0,0 +1,3 @@
 
				+.name {
			
 
				+  color: $h-font-color;
			
 
				+}
			
--- a/src/components/Hello.tsx
+++ b/src/components/Hello.tsx
@@ -1,4 +1,6 @@
 
				 import * as React from 'react';
			
 
				+import Button from '@material-ui/core/Button';
			
 
				+import './Hello.scss'
			
 
				 
			
 
				 export interface HelloProps {
			
 
				   compiler: string;
			
@@ -7,6 +9,14 @@ export interface HelloProps {
 
				 
			
 
				 export default class Hello extends React.Component <HelloProps, {}> {
			
 
				   render() {
			
 
				-    return <h1>Hello from {this.props.compiler} and {this.props.framework}</h1>;
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h1>Hello from {this.props.compiler} and {this.props.framework}</h1>
			
 
				+        <div className="name">名字颜色</div>
			
 
				+        <Button variant="contained" color="primary">
			
 
				+          Hello World
			
 
				+        </Button>
			
 
				+      </div>
			
 
				+    );
			
 
				   }
			
 
				 }
			
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,8 @@
 
				   <meta charset="UTF-8">
			
 
				   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
			
 
				   <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
			
 
				+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
			
 
				   <title>Twitter</title>
			
 
				 </head>
			
 
				 <body>
			
--- a/src/styles/resources.scss
+++ b/src/styles/resources.scss
@@ -0,0 +1 @@
 
				+$h-font-color: red;
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,18 @@ module.exports = {
 
				         use: [
			
 
				           'ts-loader'
			
 
				         ]
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.scss?$/,
			
 
				+        use: [
			
 
				+          'style-loader',
			
 
				+          'css-loader',
			
 
				+          'sass-loader',
			
 
				+          {
			
 
				+            loader: 'sass-resources-loader',
			
 
				+            options: { resources: './src/styles/resources.scss' }
			
 
				+          }
			
 
				+        ]
			
 
				       }
			
 
				     ]
			
 
				   },
			
--- a/yarn.lock
+++ b/yarn.lock