ParserError：语法错误位于第 1 行、第 23 列

Question

当我将 React 项目部署到 Netlify 时，出现此错误： 在此处输入图像描述

（节点：1551）[DEP0148] DeprecationWarning：在 /opt/build/repo/node_modules/postcss-safe-parser/node_modules/postcss/ 包的“导出”字段模块解析中使用已弃用的文件夹映射“./”包.json。更新此 package.json 以使用“./*”等子路径模式。（用于node --trace-deprecation ...显示创建警告的位置）正在创建优化的生产版本...无法编译。

./src/assets/css/responsive.css ParserError：语法错误，位于第 1 行，第 23 列，位于 Array.forEach () 处，位于 Array.forEach () 错误命令失败，退出代码为 1。

响应式.css

/************************************* ROOT /*************************************/
:root {
  --main-color: #ffbc13;
  --main-color-opacity: #ffbc1359;
  --black: rgb(17, 16, 16);
  --black-opacity: 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.5vw, 3.5rem);
  --mini-title-size: clamp(1rem, -0.875rem + 1.8vw, 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 .ant-menu-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% !important;
  }
  .headerCarousel .headerCarouselimg {
    object-fit: cover;
  }
  .headerCarousel .slick-dots-bottom button {
    background-color: var(--black) !important;

    height: 15px !important;
    width: 15px !important;
  }

  .navLogoImg {
    height: 64px !important;
  }

  div.portfolioWrap
    > div:nth-child(2)
    > div
    > div
    > div
    > div.ant-tabs-nav
    > div.ant-tabs-nav-wrap
    > div {
    flex-direction: column !important;
  }
  div.portfolioWrap
    > div: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 .ant-menu-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;
    right: 0 !important;
    left: inherit !important;
    width: 50%;
    height: 100vh;
  }

  .ant-menu-submenu-popup .navMenuItem {
    margin: 2em 0;
  }
  .ant-menu-submenu-popup .navMenuItem span {
    color: var(--black);
  }
  .ant-menu-submenu::after {
    display: none;
  }
  .navMenu .ant-menu-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 {
    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-collapse-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 /*************************************/

包.json

{
  "name": "construction-company-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@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",
    "react": "^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 dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

然后我从 css 中删除了变量，它就工作了。但我需要 css 变量，那么如何在构建时使用变量呢？我想我错过了一些东西。

Answer 1

这背后的原因是因为react-build-scripts使用postcss-safe-parser，它将您尝试在夹具中执行的添加视为无效/不安全。您可以通过将计算函数添加到您尝试在钳位函数中执行的加法来解决该错误。

请注意，我们现在计算您尝试在函数参数中执行的加法值：

:root {
  --main-color: #ffbc13;
  --main-color-opacity: #ffbc1359;
  --black: rgb(17, 16, 16);
  --black-opacity: 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。