问题：ParserError：第 1 行第 32 列的语法错误

Question

我是编程新手，我遇到了这个问题。 当我在终端中输入“npm run build”以在 React.js 中创建我的项目压缩时，我遇到了这个错误。我已经创建了另一个以前的项目，它没有这个问题，我不知道有什么区别。

问题：

Creating an optimized production build...
Failed to compile.

./src/Styles/intro.css
ParserError: Syntax Error at line: 1, column 32

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webblasyxnew@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webblasyxnew@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Iwona/.npm/_logs/2020-12-18T21_38_01_153Z-debug.log

我的 Json：

    {
  "name": "webblasyxnew",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "homepage": "https://blasyx.com/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "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 变量吗？也许有些东西我没有验证。 我的 intro.css ->

@font-face{
        font-family: 'anodina';
        src: url('../Fonts/Anodina-Regular.otf');
}

.intro__header, 
.intro__hover__title,
.intro__click__title, 
.intro__end__text {
    font-family: 'Anonymous Pro';
    font-weight: 400;
    pointer-events: none; 
}
.intro__o{
    pointer-events: none; 
}

.intro__hover__text, .intro__hover__text{
    font-family: 'anodina';
}

.intro{
    position: relative;
    padding-top: 8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: var(--clr-cyan);
}


.intro__header{

    width: min(800px, 90%);
    padding: 3rem;
    margin-bottom: 8rem;
    font-size: .75rem;
    text-align: center;
    border: 1px var(--clr-black) solid;
    box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/20);
    background-color: var(--clr-yellow);
}

.intro__info{
    width: min(800px, 90%);
    display: grid;
    grid-template-columns: 35% 1fr 35%;
    grid-template-areas: "intro__hover . intro__click";
}


.intro__hover, .intro__click, .intro__o{
    height: 25vh;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 7rem;

}
.intro__click__text, .intro__hover__text{
    position: absolute;
    text-align: center;
    width: 80%;
    font-family: 'anodina';
    color: var(--clr-white);
    opacity: 0;

}

.intro__hover, .intro__click{
    background-color: var(--clr-white);
    box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/-20);
    border: 1px var(--clr-black) solid; 
    cursor: pointer;
}

.intro__end__text{
    margin-bottom: 5rem;
}

.hidebox__intro{
    background-color: var(--clr-black);
    box-shadow: var(--clr-white) calc(var(--x)/-20) calc(var(--y)/-20);
    transition: all 300ms;
}
.showtext__intro{
    opacity: 1;
}
.hidetext__intro{
    opacity: 0;
}
#intro__hello{
    opacity: 0;
    pointer-events: none; 
}

我的 JSON 的第 14 行和第 15 行之间还有 DEBUGGER 这个词。 是正常的还是我有问题？ 就在脚本之前。

谢谢！ 废话。

Answer 1

我遇到了同样的问题，像这样：

box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/20);

改成

box-shadow: var(--clr-black) calc(var(--x)/ -20) calc(var(--y)/20);

可以解决。

postcss-safe-parser 导致问题