新增stylus配置

config/webpack.base.config.js

@@ -41,6 +41,21 @@ module.exports = {
                     "postcss-loader"
                 ]
             },
+            {
+                test: /\.styl$/,
+                use: [
+                    styleLoader,
+                    {
+                        loader: 'css-loader'
+                    },
+                    {
+                        loader: 'stylus-loader',
+                        options: {
+                            minimize: true
+                        }
+                    }
+                ]
+            },
             {
                 test: /\.(png|jpe?g|svg|gif)$/,
                 use: {

package.json

@@ -55,6 +55,8 @@
     "postcss-plugin-pr2rem": "^0.1.1",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
     "terser-webpack-plugin": "^1.4.1",
     "ts-jest": "^24.0.2",
     "typescript": "4.2.3",

src/app.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Provider } from 'react-redux'
-import {HashRouter as Router, Route, Switch, Redirect} from "react-router-dom";
+import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom";
 
 import Home from "./pages/home";
 import configureStore from "./redux/configureStore";
@@ -10,13 +10,13 @@ const App = () => {
     return (
         <Provider store={store}>
             <Router>
-            <Switch>
-                <Route exact path="/">
-                    <Redirect to="/home"></Redirect>
-                </Route>
-                <Route exact path="/home" component={Home}></Route>
-            </Switch>
-        </Router>
+                <Switch>
+                    <Route exact path="/">
+                        <Redirect to="/home"></Redirect>
+                    </Route>
+                    <Route exact path="/home" component={Home}></Route>
+                </Switch>
+            </Router>
         </Provider>
     )
 }

src/pages/home/index.styl

@@ -0,0 +1,7 @@
+.home {
+    background-color: #fff;
+
+    .title {
+        color: #2279ea;
+    }
+}

src/pages/home/index.tsx

@@ -3,42 +3,45 @@ import { connect } from "react-redux";
 import * as dataAPI from '../../api/dataAPI';
 import { IRootState } from "../../redux/states";
 import * as test from "../../redux/reducers/test"
-import { ADD_COUNT } from "../../redux/actionTypes";
+import { ADD_COUNT, SET_COUNT } from "../../redux/actionTypes";
+import "./index.styl"
 
-const Login = ({count, addCount}) => {
+const Login = ({count, addCount, setCount}: any) => {
+    let str = "test";
+    console.log(str)
 
     const testApi = () => {
-        dataAPI.getBlockNumber().then(res => {
+        dataAPI.getBlockNumber().then((res: any) => {
             console.log(res)
         })
     }
 
     const add = () => {
         addCount(1)
-        setTimeout(() => {
-            console.log('>>>',count)
-        }, 3000);
+    }
+
+    const setCount15 = () => {
+        setCount(15)
     }
 
     testApi()
 
     return (
-        <div className="signFlowLoginPage">
-            <div>测试redux数据：{count}</div>
+        <div className="home">
+            <div className="title">测试redux数据：{count}</div>
             <button onClick={add}>+</button>
             <button>-</button>
-            <button>15</button>
+            <button onClick={setCount15}>15</button>
         </div>
     );
 }
 
 export default connect(
-    (state: IRootState) => {
-        return {
-            count: state.test.count
-        }
-    },
+    (state: IRootState) => ({
+        count: state.test.count
+    }),
     dispatch => ({
-        addCount: (num) => dispatch({type: ADD_COUNT, num} )
+        addCount: (data: number) => dispatch({type: ADD_COUNT, data} ),
+        setCount: (data: number) => dispatch({type: SET_COUNT, data} )
     })
 )(Login);

tsconfig.json

@@ -6,7 +6,7 @@
         "sourceMap": true,
         "allowJs": true,
         "jsx": "react",
-        //"noImplicitAny": true,
+        // "noImplicitAny": true, // 不允许有隐式推断为 any 类型
         "removeComments": true, // 编译 js 的时候，删除掉注释
         "esModuleInterop": true, // 异步加载组件使用react-loadable
         //"typeRoots": [], // 默认所有可见的"@types"包会在编译过程中被包含进来