Мы используем babel и lerna, чтобы отдельные элементы нашего веб-приложения реагировали отдельно.Пока он работает очень хорошо, но, похоже, возникают проблемы со стилем при создании статической сборки.
Наш основной проект не выполняется через 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" компоненте нарушаются.
Кто-нибудь сталкивался с этим / есть идея, почему это происходит?
ОБНОВЛЕНИЕ:
По запросу это пример стилей, которые мы используем в приложении реагировать:
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"));
Нет сообщений об ошибках, но ясно, что стилизация прошла какмакет полностью непригоден.