Mastering the integration of Sass with NextJS

Question

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later:

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

I was puzzled because I hadn't made any changes since it was running smoothly before. Following the NextJS docs' recommendation, I installed SASS using npm i sass. The version of NextJS I am using is 9.5.1.

Here is a snippet from my package.json:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest"
  },
  "dependencies": {
    //dependencies here
  },
  "devDependencies": {
    //dev dependencies here
  }
}

The issue is not restricted to just one file as commenting out this particular file triggers errors in other .scss files as well:

@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;
}

//more styles...

css reactjs npm sass next.js

Answer 1

Answer №1

After some investigation, I discovered that the issue stemmed from node-sass. Once I removed it and installed sass instead, everything functioned as intended.

Answer 2

After some investigation, I discovered that the issue stemmed from node-sass. Once I removed it and installed sass instead, everything functioned as intended.

Answer 3

Answer №2

node-sass has been deprecated and will no longer be compatible with modern versions of nextjs

If you are in need of a solution for nextjs 11, I recommend checking out this repository, or diving into the full details provided in this article

Below is the complete next configuration code that I utilized:

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 }) => {
    // Locate 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 4

node-sass has been deprecated and will no longer be compatible with modern versions of nextjs

If you are in need of a solution for nextjs 11, I recommend checking out this repository, or diving into the full details provided in this article

Below is the complete next configuration code that I utilized:

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 }) => {
    // Locate 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 5

Answer №3

To start using SASS in your project, make sure to first install the SASS library and then add the following code snippet to your next.config.js file:

const path = require('path')

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

Answer 6

To start using SASS in your project, make sure to first install the SASS library and then add the following code snippet to your next.config.js file:

const path = require('path')

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

Mastering the integration of Sass with NextJS

Answer №1

Answer №2

Answer №3

Similar questions

Limitations of MaterialUI Slider

The JSColor onChange event is throwing an error indicating that the function is not defined

Utilizing the DirectusImage tag for a stylish background effect

What is the best way to retrieve the state value in react once it has been changed?

Can a custom cell editor for AG Grid be created using <input type="file"/>?

The <main> element is not inheriting the height of its parent

Changing the name of a React Native sample application

displaying and concealing elements with jquery

When a user scrolls over an element with a data-attribute,

Switch between pages within a reactjs application by utilizing react router

Collaborate on sharing CSS and TypeScript code between multiple projects to

Bootstrap for handling screen rotation and responsive design

Could you explain the purpose of the usage section in a CodeMirror 6 language pack?

Handling null values in React with Typescript and GraphQL: best practices

Guide on showcasing an alert notification when the data is already existing within an array through javascript

Comprehending the importance of a selector in a dropdown menu

mobile-responsive vertical alignment using Bootstrap

Output the name of the file while executing the ant process

Tips for dynamically appending a string to a predefined variable in React

Tips for aligning pagination in the MUI v5 table component and creating a fixed column