Question

我一直在用scss模块设计NextJS应用的样式，并且运行良好。后来我回来从事其他工作，突然被这个错误击中：

Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradient-bac"

我很困惑，因为我没有进行任何更改，并且之前运行良好，并且从那时起我还没有对其进行任何更改。我确保我安装了像建议npm i sass的NextJS文档之类的sass。我正在使用下一个版本9.5.1

这是我的package.json：

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest"
  },
  "dependencies": {
    "@stripe/stripe-js": "^1.9.0",
    "aws-sdk": "^2.738.0",
    "axios": "^0.19.2",
    "jwt-decode": "^2.2.0",
    "next": "^9.5.1",
    "node-sass": "^4.14.1",
    "react": "16.13.1",
    "react-aws-s3": "^1.3.0",
    "react-dom": "16.13.1",
    "sass": "^1.26.10",
    "swr": "^0.3.0"
  },
  "devDependencies": {
    "@testing-library/dom": "^7.22.2",
    "@testing-library/jest-dom": "^5.11.3",
    "@testing-library/react": "^10.4.8",
    "babel-jest": "^26.3.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-node": "^4.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.5",
    "eslint-plugin-react-hooks": "^4.0.0",
    "jest": "^26.4.0",
    "jest-dom": "^4.0.0",
    "prettier": "^2.0.5"
  }
}

这是我收到错误的文件。但是，它不仅特定于此文件。我注释掉了它，它为我的其他.scss文件排除了错误：

@use 'variables';

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: variables.$main-gradient-background;
  scroll-behavior: smooth;
}

a {
  color: lightseagreen;
  text-decoration: none;
}

button {
  background-color: black;
}

input {
  background-color: grey;
}

* {
  box-sizing: border-box;
  color: variables.$primary-color;
  font-family: variables.$primary-p-font;
  line-height: 1.45em;
  font-size: variables.$primary-font-size;
}

h1 {
  font-family: variables.$header-font;
}

h2 {
  font-family: variables.$header-font;
}

h3 {
  font-family: variables.$header-font;
}

Answer 1

我一卸载并重新安装node-sass，就发现问题出在sass上。

如何在NextJS中正确使用Sass

1 个答案: