如何正确使用 Sass 和 NextJS

Question

我一直在用 scss 模块设计我的 NextJS 应用程序，它运行良好。我后来回来做一些其他的事情，我突然被这个错误击中：

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

我很困惑，因为我没有进行任何更改，并且之前运行良好，从那时起我没有对其进行任何更改。我确保我安装了像 NextJS 文档推荐 npm i sass 这样的 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

当我卸载它并重新安装sass 后，发现问题出在node-sass，一切都按预期工作。

Answer 2

node-sass 已弃用，不再适用于现代版本的 nextjs

对于在 nextjs 11 之后寻找有效答案的任何人。您可以参考此repo，或阅读此article 中的完整详细信息

这是我使用过的完整的下一个配置代码

const withTM = require('next-transpile-modules')([]);

const withPlugins = require('next-compose-plugins');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = withPlugins([withTM], {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Find and remove NextJS css rules.
    const cssRulesIdx = config.module.rules.findIndex((r) => r.oneOf);
    if (cssRulesIdx === -1) {
      throw new Error('Could not find NextJS CSS rule to overwrite.');
    }
    config.module.rules.splice(cssRulesIdx, 1);

    // Add a simpler rule for global css anywhere.
    config.plugins.push(
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: 'static/chunks/pages/[contenthash].css',
        chunkFilename: 'static/chunks/pages/[contenthash].css',
      }),
    );

    config.module.rules.push({
      test: /\.(sa|sc|c)ss$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
    });

    config.module.rules.push({
      test: /\.tsx/,
      use: [defaultLoaders.babel],
    });

    return config;
  },
});

Answer 3

首先在您的应用程序中安装 sass 并将以下代码粘贴到您的 next.config.js 文件中

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },

}