How to properly use Sass with NextJS

user_13893876 0
Viewed 1561

I have been styling my NextJS app with scss modules and It was working fine. I came back later to work on some other stuff and I was suddenly being hit with this error:

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

I am confused because I had not made any changes and it had been running fine earlier and I have not made any changes to it since then. I made sure I installed sass like NextJS docs recommeneded npm i sass. I am using next version 9.5.1

here is my 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"
  }
}

And this is the file that I am recieving the error for. It's not specific to just this file though. I comment out this one it shoots out errors for my other .scss files:

@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;
}
npm next.js reactjs sass css
3 Answers

Figured out the problem was node-sass as soon as I uninstalled it and reinstalled sass everything worked as expected.

user_138938760

node-sass is deprecated and will no longer work with modern versions of nextjs

For anyone who is looking for a working answer after nextjs 11. You can refer to this repo, or read full details in this article

Here is full next config code that I have used

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;
  },
});
user_30252590

at first install sass in your application and paste below code in your next.config.js file

const path = require('path')

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

}

user_185088970
Related