From 7006d753e1bc7a6be20bef6299c0bc9461d15dc6 Mon Sep 17 00:00:00 2001 From: NyanShen Date: Tue, 31 Jan 2023 09:07:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Estylus=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/webpack.base.config.js | 15 ++++++++ package-lock.json | 68 +++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/app.tsx | 16 ++++----- src/pages/home/index.styl | 7 ++++ src/pages/home/index.tsx | 33 +++++++++-------- tsconfig.json | 2 +- 7 files changed, 119 insertions(+), 24 deletions(-) create mode 100644 src/pages/home/index.styl diff --git a/config/webpack.base.config.js b/config/webpack.base.config.js index dcaa7e4..1c745ed 100644 --- a/config/webpack.base.config.js +++ b/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: { diff --git a/package-lock.json b/package-lock.json index 845962b..54e754e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4855,6 +4855,15 @@ } } }, + "css-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", + "integrity": "sha512-UNIFik2RgSbiTwIW1IsFwXWn6vs+bYdq83LKTSOsx7NJR7WII9dxewkHLltfTLVppoUApHV0118a4RZRI9FLwA==", + "dev": true, + "requires": { + "css": "^2.0.0" + } + }, "css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -9117,6 +9126,12 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "dev": true + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -13728,6 +13743,53 @@ } } }, + "stylus": { + "version": "0.54.8", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", + "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "dev": true, + "requires": { + "css-parse": "~2.0.0", + "debug": "~3.1.0", + "glob": "^7.1.6", + "mkdirp": "~1.0.4", + "safer-buffer": "^2.1.2", + "sax": "~1.2.4", + "semver": "^6.3.0", + "source-map": "^0.7.3" + }, + "dependencies": { + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true + } + } + }, + "stylus-loader": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz", + "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==", + "dev": true, + "requires": { + "loader-utils": "^1.0.2", + "lodash.clonedeep": "^4.5.0", + "when": "~3.6.x" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -16343,6 +16405,12 @@ "webidl-conversions": "^4.0.2" } }, + "when": { + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz", + "integrity": "sha512-d1VUP9F96w664lKINMGeElWdhhb5sC+thXM+ydZGU3ZnaE09Wv6FaS+mpM9570kcDs/xMfcXJBTLsMdHEFYY9Q==", + "dev": true + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", diff --git a/package.json b/package.json index 2919574..b3ac69d 100644 --- a/package.json +++ b/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", diff --git a/src/app.tsx b/src/app.tsx index 5f5e90f..9d797cc 100644 --- a/src/app.tsx +++ b/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 ( - - - - - - - + + + + + + + ) } diff --git a/src/pages/home/index.styl b/src/pages/home/index.styl new file mode 100644 index 0000000..81e705c --- /dev/null +++ b/src/pages/home/index.styl @@ -0,0 +1,7 @@ +.home { + background-color: #fff; + + .title { + color: #2279ea; + } +} \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 27aa1b7..1bdb000 100644 --- a/src/pages/home/index.tsx +++ b/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 ( -
-
测试redux数据：{count}
+
+
测试redux数据：{count}
- +
); } 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); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index f57547f..fe59764 100644 --- a/tsconfig.json +++ b/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"包会在编译过程中被包含进来