在React应用程序中没有正确构建样式

Question

这个问题发生在一个React应用程序中。当我用react构建它的时候--本地脚本，所有的东西都是完美的，样式也是它们应该有的样子。但是，当应用程序是用Docker构建时，样式中的某些属性值将被未定义的CSS变量替换。用于创建Docker容器的Node.js版本与本地机器上的版本完全相同。同时，在React应用程序中使用了引导程序。以前没有这样奇怪的行为，一切都是完美的，没有改变风格。

这里是package.json：

{
  "name": "minible-react",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@capaj/react-select-timezone": "^3.0.0",
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.0.5",
    "@mui/lab": "^5.0.0-alpha.51",
    "@mui/material": "^5.0.4",
    "@mui/styles": "^5.0.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/date-fns": "^2.6.0",
    "@visx/responsive": "^2.1.0",
    "animate.css": "^4.1.1",
    "apexcharts": "^3.27.3",
    "availity-reactstrap-validation": "^2.7.0",
    "axios": "^0.21.0",
    "bootstrap": "^5.0.0-beta2",
    "classnames": "^2.3.1",
    "clsx": "^1.1.1",
    "date-fns": "^2.23.0",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "husky": "^7.0.2",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "leaflet": "^1.7.1",
    "lint-staged": "^11.2.3",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "metismenujs": "^1.2.1",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "node-sass": "^4.0.0",
    "prop-types": "^15.7.2",
    "qs": "^6.11.0",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-color": "^2.19.3",
    "react-countup": "^4.3.3",
    "react-csv": "^2.0.3",
    "react-date-range": "^1.3.0",
    "react-datepicker": "^3.8.0",
    "react-dom": "^17.0.1",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.4.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-input-mask": "^2.0.4",
    "react-modal": "^3.14.4",
    "react-moment": "^1.1.1",
    "react-phone-input-2": "^2.14.0",
    "react-places-autocomplete": "^7.3.0",
    "react-redux": "^7.2.2",
    "react-redux-toastr": "7.5.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-select": "^3.2.0",
    "react-select-async-paginate": "^0.6.0",
    "react-slider-modal": "^1.3.1",
    "react-slideshow-image": "^3.6.0",
    "react-table": "^7.7.0",
    "react-times": "^3.1.12",
    "react-timezone-select": "^1.0.2",
    "react-toastr": "^3.0.0",
    "react-transition-group": "^4.4.2",
    "reactstrap": "^8.9.0",
    "recharts": "^2.1.0",
    "recompose": "^0.30.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "save-dev": "0.0.1-security",
    "simplebar-react": "^2.3.0",
    "toastr": "^2.1.4",
    "uuid": "^8.3.2",
    "web-vitals": "^0.2.4",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@iconify-icons/bi": "^1.1.5",
    "@iconify/react": "^1.1.4",
    "@visx/mock-data": "^2.1.0",
    "animation.css": "^0.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-react": "^7.26.1",
    "prettier": "^2.4.1",
    "pretty-quick": "^3.1.1",
    "redux-devtools": "^3.7.0"
  }
}

本地生成后组件的样式

Docker生成后组件的样式(所有这些变量都未定义)

我将感激任何想法，为什么会发生，以及如何解决它。

Answer 1

我也遇到了同样的问题，这个解决方案也适用于我:统一所有节点并重新安装它。