當我將React專案部署到Netlify時，我得到了這個錯誤。 在此輸入圖片描述
。
(node:1551) [DEP0148] DeprecationWarning。在/opt/build/repo/node_modules/postcss-safe-parser/node_modules/postcss/package.json的包的 "exports "欄位模塊決議中使用已廢棄的檔案夾映射"./"。
更新這個package.json以使用像"./*"的子路徑模式。
(使用node --trace-deprecation ...來顯示警告產生的地方)
創建一個優化的生產構建...
編譯失敗。
./src/assets/css/responsive.css ParserError。語法錯誤在第1行，第23列 at Array.forEach () 在 Array.forEach () 錯誤 命令失敗，退出代碼為1.
。responive.css
/************************************* ROOT /*************************************/
:root {
--main-color: #ffbc13;
--main- color-opacity: #ffbc1359;
--black: rgb（17, 16, 16）。
-黑色-不透明度。rgba（17, 16, 16, 0.575）。
--white: white;
--small-size: 14px;
--title-size: clamp(1rem, -0.875rem 2.4vw, 3.5rem) 。
--basic-text-size: clamp(1rem, -0.875rem 1.5uvw, 3.5rem)。
--mini-title-size: clamp(1rem, -0.875rem 1.8uvw, 3.5rem)。
--body-bg-color: #e8e8e8;
--hamburger: url("./img/hamburger.svg") 。
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.ant-menu-submenu-popup {
top: 128px !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.ant-menu-submenu-popup {
top: 92px !important;
}
}
@media only screen and (min-width: 100px) and (max-width: 576px) {
.ant-menu-submenu-popup {
top: 71px !important;
}
}
/************************************* ROOT /*************************************/
/************************************* MAX 480 PX /*************************************/
@media only screen and (max-width: 480px) {
}
/************************************* MAX 480 PX /*************************************/
/************************************* MAX 576 PX /*************************************/
@media only screen and (max-width: 576px) {
.statItem {
flex: 0 0 100% !important;
margin: 1em 0;
}
.partnersItem {
flex: 0 0 50%。
padding: 0.5em;
margin: 0.5em 0;
}
.footerRight {
align-items: flex-start !important;
}
.navBackground {
padding: 0.3em;
}
.navMenu {
border: none;
.navMenu .antmenu-submenu-title {
display: flex;
}
}
/************************************* MAX 576 PX /*************************************/。
/************************************* MAX 768 PX /*************************************/
@media only screen and (max-width: 768px) {
.mainServiceItem {
display: flex;
margin: 1em 0;
flex: 1 1 100% !emant;
}
.headerCarousel .headerCarouselimg {
object-fit: cover;
.headerCarousel .slickdots-bottom button {
background-color: var(-black) !important;
高度: 15px !important;
width: 15px !important;
}
.navLogoImg {
height: 64px !important;
}
div.portfolioWrap { height: 64px !
> div:nth-child(2)
> div
> div
> div
> div.ant-tabs-nav
> div.ant-tabs-nav-wrap
> div {
flex-direction: column !important;
}
div.portfolioWrapdiv:nth-child(2)
> div
> div
> div
> div.ant-tabs-nav
> div.ant-tabs-nav-wrap
> div
> div {
margin: 0.5em 0;
}
.projectItem {
flex: 0 0 100%。
}
.contactWrap {
margin-top: 130px;
}
.aboutUsWrap {
margin-top: 130px;
}
}
/************************************* MAX 768 PX /*************************************/
/************************************* MAX 992 PX /*************************************/
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.ant-menu-submenu-popup {
top: 92px !important;
}
}
@media only screen and (max-width: 992px) {
.navMenu .antmenu-submenu-title span {
height: 32px;
width: 32px;
background-image: var(-hamburger);
background-repeat: no-repeat;
background-size: contain;
.ant-menu-submenu-popup > .ant-menu {
background-color: var(--main-color) !important;
box-shadow: none;
}
.ant-menu-submenu-popup {
background-color: var(--main-color) !important;
右邊。0 !important;
left: 繼承 !important;
width: 50%。
高度: 100vh;
}
.ant-menu-submenu-popup .navMenuItem {
margin: 2em 0;
}
.ant-menu-submenu-opup .navMenuItem span {
color: var(-黑色)。
}
.ant-menu-submenu: :after {
display: none;
}
.navMenu .antmenu-submenu-title span svg {
display: none;
}
.WhyUsCollapse {
width: 100%。
}
.WhyUsGallery {
width: 100%。
}
.statLabel {
font-size: var(-small-size)。
}
.partners-card-back h4 {
font-size: var（-small-size）。
}
.footer {
flex-direction: column;
justify-content: center;
}
.footerRight,
.footerCenter,
.footerLeft {
justify-content: center;
align-items: center;
width: 100% !important;
padding: 1em 0;
}
.footerRight h5,
.footerCenter h5,
.footerLeft h5 {
text-align: center;
border-bottom: 1px solid var(-main-color);
}
.footerLeft p {
text-align: center;
}
.footerCenter ul li {
text-align: center;
}
.footerRight ul li { text-align: center; }
padding: 1em;
}
}
/************************************* MAX 992 PX /*************************************/
/************************************* MAX 1200 PX /*************************************/
@media only screen and (max-width: 1200px) {
.headerCarouselInnerWrap h3 {
font-size: 4.5vw !important;
top: 15vh;
margin: 0 !important;
text-align: left;
}
.headerCarouselInnerWrap h4 {
font-size: 4vw !important;
top: 35vh;
margin: 0 !important;
text-align: left;
}
.headerCarouselInnerWrap h5 {
font-size: 3.5vw !important;
top: 50vh;
margin: 0 !important;
text-align: left;
}
.mainServiceItem {
display: flex;
margin: 1em 0;
flex: 1 1 50%。
}
.WhyUsGallery img {
padding: 0.5em;
height: 287px;
object-fit: cover;
}
.WhyUsPanel .ant-colapse-content-box p {
padding: 0;
.statItem {
flex: 0 0 25%。
}
.footerRight,
.footerCenter,
.footerLeft {
width: 32%。
padding: 1em 0;
}
.footerLeft p {
font-size: var(-small-size)。
}
.footerCenter ul li a {
font-size: var（-small-size）。
}
.footerRight p,
.footerRight a {
font-size: var(-small-size)。
}
.footerRight ul li img {
height: 22px;
}
}
/************************************* MAX 1200 PX /*************************************/
package.json
{
"name": "construction-company-website",
"版本": "0.1.0",
"私有"。true。
"依賴性": {
"@chec/commerce.js": "^2.7.2",
"@react-google-maps/api": "^2.2.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.16.13",
"i18next": "^20.4.0",
"reaction": "^17.0.2",
"react-countup": "^5.2.0",
"react-dom": "^17.0.2",
"react-google-maps": "^9.4.5",
"react-i18next": "^11.11.4",
"react-image-gallery": "^1.2.7",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3"。
"react-visibility-sensor": "^5.1.1",
"web-vitals": "^1.0.1".
},
"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": {
"production": [
">0.2%",
"未死"。
"not op_mini all".
],
"開發": [
"最后1個chrome版本"。
"last 1 firefox version",
"最后1個Safari版本"。
]
}
}
然后我從css中洗掉了變數，它就成功了。但我需要css變數，那么我如何在構建時使用變數？我想我錯過了一些東西。
uj5u.com熱心網友回復：
這背后的原因是，react-build-scripts使用postcss-safe-parser，它將你在camp中嘗試的添加視為無效/不安全。你可以通過在你試圖在鉗子函式中執行的加法中添加一個計算函式來解決這個錯誤。
注意，我們現在計算你在函式引數中試圖執行的加法的值：
：root {
--main-color: #ffbc13;
--main- color-opacity: #ffbc1359;
--black: rgb（17, 16, 16）。
-黑色-不透明度。rgba（17, 16, 16, 0.575）。
--white: white;
--small-size: 14px;
--title-size: clamp(1rem, calc(-0.875rem 2.4vw), 3.5rem) 。
--basic-text-size: clamp(1rem, calc(-0.875rem 1.5vw), 3.5rem) 。
--mini-title-size: clamp(1rem, calc(-0.875rem 1.8vw), 3.5rem) 。
--body-bg-color: #e8e8e8;
}
在本地開發時，這樣做的原因是構建腳本沒有呼叫postcss-safe-parser，只是 "按原樣 "提供CSS。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/314876.html
標籤：