配置

craco.config.js

 const CracoLessPlugin = require('craco-less');
+const { loaderByName } = require("@craco/craco");
 const { name } = require('./package');
 
 module.exports = {
-  style: {
-    postcss: {
-      plugins: [
-        require('tailwindcss'),
-        require('autoprefixer'),
-      ],
-    },
-  },
   plugins: [
     {
       plugin: CracoLessPlugin,
@@ -54,7 +47,7 @@ module.exports = {
       output: {
         library: `${name}-[name]`,
         libraryTarget: 'umd',
-        jsonpFunction: `webpackJsonp_${name}`,
+        chunkLoadingGlobal: `webpackJsonp_${name}`,
         globalObject: 'window',
       }
     }

package.json

@@ -20,7 +20,7 @@
     "axios": "^0.19.0",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.4.2",
-    "craco-less": "^1.17.1",
+    "craco-less": "^2.0.0",
     "crypto-js": "^4.0.0",
     "echarts": "^5.3.1",
     "immutability-helper": "^3.1.1",
@@ -39,7 +39,7 @@
     "react-redux": "^7.1.0",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "react-virtualized": "^9.22.3",
     "redux": "^4.0.1",
     "redux-saga": "^1.0.5",
@@ -76,10 +76,5 @@
     ]
   },
   "proxy": "http://139.198.127.28:18189",
-  "homepage": "http://myhost/data-govern",
-  "devDependencies": {
-    "autoprefixer": "^9.8.6",
-    "postcss": "^7.0.36",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4"
-  }
+  "homepage": "http://myhost/data-govern"
 }

src/index.less

@@ -3,10 +3,6 @@
 @import './mixins.less';
 @import './variables.less';
 
-// @tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 //与center-home中的样式保持统一
 body {
   margin: 0;
@@ -59,7 +55,7 @@ code {
   overflow: auto;
 }
 
-.d-flex {
+.d-flex, .flex {
   display: flex;
 }
 

src/mixins.less

-@paddingArray: 0 0, 1 2px, 2 5px, 3 10px, 4 15px, 5 20px, 6 30px, 7 50px, 8 100px;
+@paddingArray: 0 0, 1 2px, 2 5px, 3 12px, 4 15px, 5 20px, 6 30px, 7 50px, 8 100px;
 
 .paddingNmargin(@iterator:1) when(@iterator <= length(@paddingArray)) {
   @name: extract(extract(@paddingArray, @iterator), 1);
@@ -54,7 +54,7 @@
 
   .paddingNmargin(@iterator + 1);
 }
-// .paddingNmargin();
+.paddingNmargin();
 
 @colorArray: primary @primary-color, success @success-color, warning @warning-color, error @error-color,
   muted @normal-color, white @white, transparent transparent;

tailwind.config.js

-const colors = require('tailwindcss/colors')
-// console.log(colors)
-module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    colors,
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}