Question

我们正在使用babel和lerna来使React Web App的某些元素分开。到目前为止，它的运行情况非常好，但是当我们创建静态版本时，似乎在样式方面存在问题。

我们的核心项目不是通过babel运行的，也没有对babel的引用。

我们分离的组件具有以下babel依赖关系：

"devDependencies": {
    "@babel/cli": "^7.2.0",
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.2.1",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.2.0",
    ...
  }

我们使用以下配置文件：

module.exports = {
    plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        '@babel/plugin-transform-runtime'
    ],
    presets: [
        '@babel/preset-env',
        '@babel/preset-react'
    ]
};

然后我们运行此命令./node_modules/.bin/babel ./src/ -d ./dist/ --copy-files以创建我们的“ babelised”包，然后使用lerna将其符号链接到核心应用。

我们对大多数组件使用material-ui，并且使用withStyles(style)(Component)语法将内联CSS附加到组件。

如果我在核心项目上运行npm start，则一切正常，并且按预期进行，但是，当我们使用npm run-script build创建构建并启动该构建时，“ babelised”组件中的所有样式都将损坏。

有没有人经历过这个/知道为什么会发生？

更新：

根据要求，这是我们在react应用中使用的样式的示例：

const styles = theme => ({
  spinner: {
    margin: theme.spacing.unit * 2,
    "margin-left": "calc(50% - 25px)"
  },
  topDiv: {
    display: "flex",
    "align-items": "center",
    width: "100%",
    "padding-bottom": "10px",
    "font-size": "40px",
    color: "white",
    "font-family": "Univia Pro, sans-serif",
    "font-weight": "350",
    "text-shadow": "0.02em 0.02em rgb(91, 91, 91, 0.75)",
    "border-style": "none none solid none",
    "border-width": "2px",
    "margin-bottom": "30px"
  },
  dataImport: {
    margin: "0px 10px 0px 10px"
  },

  paper: {
    width: "25%",
    "max-height": "100%",
    backgroundColor: "rgba(255, 255, 255, 0.95)",
    padding: "20px",
    "font-size": "13px",
    "overflow-y": "scroll"
  },
  instructionsDiv: {
    "border-style": "none none solid none",
    "border-width": "2px",
    "border-color": "rgba(0, 0, 0, 0.4)"
  },
  informationDiv: {
    "border-style": "none none solid none",
    "border-width": "2px",
    "border-color": "rgba(0, 0, 0, 0.4)"
  },
  buttonsDiv: {
    display: "flex",
    "flex-direction": "column",
    "justify-content": "center",
    "align-items": "center"
  },
  pluginStoreButton: {
    color: "white",
    "background-color": "#CFD134",
    margin: "15px 0px 15px 0px",
    width: "255px",
    "&:hover": {
      "background-color": "#b6b742"
    }
  },
  integrationStoreButton: {
    color: "white",
    "background-color": "#2699FB",
    "margin-bottom": "10px",
    width: "255px",
    "&:hover": {
      "background-color": "#2f7cbf"
    }
  },
  emailTeamButton: {
    "margin-top": "10px",
    "background-color": "#EDF3F0",
    "&:hover": {
      "background-color": "#c9d3ce"
    },
    color: "#186A3B",
    "font-size": "11px",
    width: "260px"
  }
});

我们正在使用Material-UI withStyles高阶组件，如下所示：

export default withStyles(styles)(MyClass);

当它通过babel运行时，我们得到类似的东西：

var styles = function styles(theme) {
  return {
    spinner: {
      margin: theme.spacing.unit * 2,
      "margin-left": "calc(50% - 25px)"
    },
    topDiv: {
      display: "flex",
      "align-items": "center",
      width: "100%",
      "padding-bottom": "10px",
      "font-size": "40px",
      color: "white",
      "font-family": "Univia Pro, sans-serif",
      "font-weight": "350",
      "text-shadow": "0.02em 0.02em rgb(91, 91, 91, 0.75)",
      "border-style": "none none solid none",
      "border-width": "2px",
      "margin-bottom": "30px"
    },
    dataImport: {
      margin: "0px 10px 0px 10px"
    },
    paper: {
      width: "25%",
      "max-height": "100%",
      backgroundColor: "rgba(255, 255, 255, 0.95)",
      padding: "20px",
      "font-size": "13px",
      "overflow-y": "scroll"
    },
    instructionsDiv: {
      "border-style": "none none solid none",
      "border-width": "2px",
      "border-color": "rgba(0, 0, 0, 0.4)"
    },
    informationDiv: {
      "border-style": "none none solid none",
      "border-width": "2px",
      "border-color": "rgba(0, 0, 0, 0.4)"
    },
    buttonsDiv: {
      display: "flex",
      "flex-direction": "column",
      "justify-content": "center",
      "align-items": "center"
    },
    pluginStoreButton: {
      color: "white",
      "background-color": "#CFD134",
      margin: "15px 0px 15px 0px",
      width: "255px",
      "&:hover": {
        "background-color": "#b6b742"
      }
    },
    integrationStoreButton: {
      color: "white",
      "background-color": "#2699FB",
      "margin-bottom": "10px",
      width: "255px",
      "&:hover": {
        "background-color": "#2f7cbf"
      }
    },
    emailTeamButton: {
      "margin-top": "10px",
      "background-color": "#EDF3F0",
      "&:hover": {
        "background-color": "#c9d3ce"
      },
      color: "#186A3B",
      "font-size": "11px",
      width: "260px"
    }
  };
};

并且：var _default = (0, _withStyles.default)(styles)(MyClass);

_withStyles的导入方式如下：var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

没有错误消息，但很明显，样式已消失，因为布局完全不可用。

Answer 1

尝试将此插件添加到您的.babelrc中：

["@babel/plugin-proposal-decorators", {"legacy": true}],

材质的用户界面“带有样式”，带有通天塔，样式已损坏

1 个答案: