From dc8cc720960663480430ef0d94049850c28e5dd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pha=CC=A3m=20Linh?= Date: Wed, 3 Nov 2021 00:46:44 +0700 Subject: [PATCH] Add ant design --- config/webpack.config.js | 39 ++ package.json | 3 + src/App.css | 38 -- src/App.less | 44 +++ src/App.tsx | 56 +-- src/{Button.tsx => MyButton.tsx} | 4 +- src/layouts/AuthLayout.less | 53 +++ src/layouts/AuthLayout.tsx | 32 ++ src/pages/login/Login.less | 15 + src/pages/login/Login.tsx | 111 ++++++ src/react-app-env.d.ts | 15 +- yarn.lock | 598 ++++++++++++++++++++++++++++++- 12 files changed, 929 insertions(+), 79 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.less rename src/{Button.tsx => MyButton.tsx} (73%) create mode 100644 src/layouts/AuthLayout.less create mode 100644 src/layouts/AuthLayout.tsx create mode 100644 src/pages/login/Login.less create mode 100644 src/pages/login/Login.tsx diff --git a/config/webpack.config.js b/config/webpack.config.js index d7f95dd..08c882d 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -63,6 +63,8 @@ const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; +const lessRegex = /\.less$/; +const lessModuleRegex = /\.module\.less$/; const hasJsxRuntime = (() => { if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { @@ -151,6 +153,13 @@ module.exports = function (webpackEnv) { loader: require.resolve(preProcessor), options: { sourceMap: true, + ...(preProcessor === 'less-loader' + ? { + lessOptions: { + javascriptEnabled: true, + }, + } + : void 0), }, } ); @@ -496,6 +505,36 @@ module.exports = function (webpackEnv) { }, }), }, + { + test: lessRegex, + exclude: lessModuleRegex, + use: getStyleLoaders( + { + importLoaders: 2, + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + }, + 'less-loader', + ), + // Don't consider CSS imports dead code even if the + // containing package claims to have no side effects. + // Remove this when webpack adds a warning or an error for this. + // See https://github.com/webpack/webpack/issues/6571 + sideEffects: true, + }, + { + test: lessModuleRegex, + use: getStyleLoaders( + { + importLoaders: 2, + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + modules: { + getLocalIdent: getCSSModuleLocalIdent, + }, + }, + 'less-loader', + ), + sideEffects: true, + }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass diff --git a/package.json b/package.json index f91f56f..170c7ff 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-redux": "7.1.7", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", + "antd": "^4.16.13", "axios": "0.24.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.0", @@ -49,6 +50,8 @@ "jest-circus": "26.6.0", "jest-resolve": "26.6.0", "jest-watch-typeahead": "0.6.1", + "less": "^4.1.2", + "less-loader": "7.3.0", "mini-css-extract-plugin": "0.11.3", "optimize-css-assets-webpack-plugin": "5.0.4", "pnp-webpack-plugin": "1.6.4", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.less b/src/App.less new file mode 100644 index 0000000..2fc1774 --- /dev/null +++ b/src/App.less @@ -0,0 +1,44 @@ +@import '~antd/dist/antd.less'; + +#components-form-demo-control-hooks .ant-btn { + margin-right: 8px; +} + +/*.App {*/ +/* text-align: center;*/ +/*}*/ + +/*.App-logo {*/ +/* height: 40vmin;*/ +/* pointer-events: none;*/ +/*}*/ + +/*@media (prefers-reduced-motion: no-preference) {*/ +/* .App-logo {*/ +/* animation: App-logo-spin infinite 20s linear;*/ +/* }*/ +/*}*/ + +/*.App-header {*/ +/* background-color: #282c34;*/ +/* min-height: 100vh;*/ +/* display: flex;*/ +/* flex-direction: column;*/ +/* align-items: center;*/ +/* justify-content: center;*/ +/* font-size: calc(10px + 2vmin);*/ +/* color: white;*/ +/*}*/ + +/*.App-link {*/ +/* color: #61dafb;*/ +/*}*/ + +/*@keyframes App-logo-spin {*/ +/* from {*/ +/* transform: rotate(0deg);*/ +/* }*/ +/* to {*/ +/* transform: rotate(360deg);*/ +/* }*/ +/*}*/ diff --git a/src/App.tsx b/src/App.tsx index 2d7f591..f31b924 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import logo from './logo.svg'; -import './App.css'; -import Button from './Button'; +import './App.less'; +import MyButton from './MyButton'; import ThemeToggle from './ThemeToggle'; import ThemeDisplay from './ThemeDisplay'; import { ThemeProvider } from './ThemeProvider'; @@ -9,6 +9,7 @@ import CountDisplay from './CountDisplay'; import UseRef from './components/use-ref/UseRef'; import { useAppDispatch } from './app/hooks'; import { incrementAsync } from './features/counter/counterSlice'; +import Login from './pages/login/Login'; function App() { console.log('App render'); @@ -41,32 +42,35 @@ function App() { return ( - setCount(+event.target.value)} /> - +