javascript - ParserError : Syntax Error at line: 1, 第 23 列

Question

当我将 React 元素部署到 Netlify 时，我收到了这个错误:
enter image description here
(节点:1551)[DEP0148] DeprecationWarning:在/opt/build/repo/node_modules/postcss-safe-parser/node_modules/postcss/包的“exports”字段模块解析中使用不推荐使用的文件夹映射“./”包.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它将您尝试在夹子中执行的添加视为无效/不安全。您可以通过将 calc 函数添加到您尝试在钳位函数中执行的添加来解决错误。
请注意，我们现在计算您尝试在函数参数中执行的加法的值:

: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。