package.json

@@ -13,10 +13,6 @@
   "author": "zhouxhere",
   "license": "ISC",
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.0",
-    "@mui/material": "^5.3.0",
     "axios": "^0.24.0",
     "core-js": "^3.20.2",
     "moment": "^2.29.1",
@@ -49,6 +45,8 @@
     "eslint-webpack-plugin": "^3.1.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
     "lint-staged": "^12.1.7",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "^5.0.2",

src/App.js

@@ -1,21 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import Router from './router'
-import { useSelector } from 'react-redux'
-import { createTheme, ThemeProvider } from '@mui/material'
 
 const App = () => {
-  const themeConfig = useSelector((state) => state.theme)
+  return <Router />
-  const theme = createTheme(themeConfig)
-
-  useEffect(() => {
-    console.log('app load')
-  }, [])
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Router />
-    </ThemeProvider>
-  )
 }
 
 export default App

src/config/defaultTheme.js

@@ -1 +0,0 @@
-module.exports = {}

src/page/home/index.js

@@ -1,5 +1,3 @@
-import { Button } from '@mui/material'
-import { orange } from '@mui/material/colors'
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -14,39 +12,13 @@ const Home = () => {
     dispatch({ type: 'DEL_COUNT' })
   }, [dispatch])
 
-  const changeTheme = useCallback(() => {
-    dispatch({
-      type: 'THEME_UPDATE',
-      palette: {
-        primary: {
-          main: orange[500],
-        },
-      },
-    })
-  }, [dispatch])
-
-  const resetTheme = useCallback(() => {
-    dispatch({
-      type: 'THEME_RESET',
-    })
-  }, [dispatch])
-
   return (
     <div>
       <h3>home page</h3>
-      <Button variant='outlined' onClick={addCount}>
+      <button onClick={addCount}>add</button>
-        add
+      <button onClick={delCount}>del</button>
-      </Button>
-      <Button variant='outlined' onClick={delCount}>
-        del
-      </Button>
-      <Button variant='outlined' onClick={changeTheme}>
-        change
-      </Button>
-      <Button variant='outlined' onClick={resetTheme}>
-        reset
-      </Button>
     </div>
   )
 }
+
 export default Home

src/store/index.js

@@ -4,11 +4,9 @@ import storageEnhancer from './enhancer/storage'
 import loggerMiddleware from './middleware/logger'
 import appReducer from './reducer/app'
 import countReducer from './reducer/count'
-import themeReducer from './reducer/theme'
 
 const reducer = combineReducers({
   app: appReducer,
-  theme: themeReducer,
   count: countReducer,
 })
 const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunk)

src/store/reducer/theme.js

@@ -1,23 +0,0 @@
-import * as defaultTheme from '../../config/defaultTheme'
-import { copyTool } from '../../util/copy'
-import { storeTool } from '../../util/store'
-
-const updateTheme = (state, params) => {
-  return copyTool.merger(state, params)()
-}
-
-const resetTheme = () => {
-  return defaultTheme
-}
-
-const saveTheme = (themeState) => {
-  return themeState
-}
-
-const themeReducer = storeTool.createReducer(defaultTheme, {
-  THEME_UPDATE: updateTheme,
-  THEME_RESET: resetTheme,
-  THEME_SAVE: saveTheme,
-})
-
-export default themeReducer

webpack.common.js

@@ -85,40 +85,40 @@ module.exports = {
           require.resolve('postcss-loader'),
         ],
       },
-      // {
+      {
-      //   test: /\.less$/,
+        test: /\.less$/,
-      //   exclude: /\.module\.less$/,
+        exclude: /\.module\.less$/,
-      //   use: [
+        use: [
-      //     require.resolve('style-loader'),
+          require.resolve('style-loader'),
-      //     {
+          {
-      //       loader: require.resolve('css-loader'),
+            loader: require.resolve('css-loader'),
-      //       options: {
+            options: {
-      //         importLoaders: 3,
+              importLoaders: 3,
-      //         modules: {
+              modules: {
-      //           mode: 'icss',
+                mode: 'icss',
-      //         },
+              },
-      //       },
+            },
-      //     },
+          },
-      //     require.resolve('postcss-loader'),
+          require.resolve('postcss-loader'),
-      //     require.resolve('less-loader'),
+          require.resolve('less-loader'),
-      //   ],
+        ],
-      //   sideEffects: true,
+        sideEffects: true,
-      // },
+      },
-      // {
+      {
-      //   test: /\.module\.less$/,
+        test: /\.module\.less$/,
-      //   use: [
+        use: [
-      //     require.resolve('style-loader'),
+          require.resolve('style-loader'),
-      //     {
+          {
-      //       loader: require.resolve('css-loader'),
+            loader: require.resolve('css-loader'),
-      //       options: {
+            options: {
-      //         importLoaders: 3,
+              importLoaders: 3,
-      //         modules: true,
+              modules: true,
-      //       },
+            },
-      //     },
+          },
-      //     require.resolve('postcss-loader'),
+          require.resolve('postcss-loader'),
-      //     require.resolve('less-loader'),
+          require.resolve('less-loader'),
-      //   ],
+        ],
-      // },
+      },
     ],
   },
   resolve: {