Javascript 问题：ParserError:第32列第1行出现语法错误

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

问题:

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变量吗？也许有些事情我没有证实。 我的简介.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这个词。 这是正常的还是我有问题？ 就在脚本之前

谢谢！

---

Blas.

根据错误，问题源于

intro.css

。你能分享那个文件吗？@Mureinik谢谢你的回答！在那里我添加了intro.css。可能是因为我在使用Css变量，而有些事情我没有做？根据错误，问题源于

intro.Css

。你能分享那个文件吗？@Mureinik谢谢你的回答！在那里我添加了intro.css。可能是因为我在使用Css变量，而有些事情我没有做？