材质UI“带样式”带babel,样式断开

我们使用babel和lerna来分离react web应用程序的某些元素。到目前为止,它工作得非常好,但是在我们创建静态构建时,它似乎在样式方面有问题。

我们的核心项目不是通过巴别塔运行的,也没有任何巴别塔的参考。

我们分离的组件具有以下巴别塔依赖项:

"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 为了创建我们的“宝贝”包,我们使用 lerna .

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

如果我跑 npm start 在核心项目中,一切都很好,正如预期的那样,但是,当我们使用 npm run-script build 启动它,“宝贝”组件中的所有样式都被破坏了。

有没有人经历过这件事/知道它发生的原因?

更新:

根据要求,这是我们在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"
  }
});

我们用的是材料界面 withStyles 像这样的高阶分量:

export default withStyles(styles)(MyClass);

当它穿过巴别塔时,我们会得到这样的东西:

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"));

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