How to use scss without css modules in nextjs

Question

I can configure webpack to allow includes of scss.

Note: Working with classNames on the original html is faster when copying code between static html to React components, which is why I want to do it this way.

How to make this work in nextjs without css modules and styled components and just using basic scss and classnames?

import 'styles/MyComponent.scss';

const MyComponent = () => {
  return (
    <div className="someClass">
      stuff..
    </div>
  );
};

export default MyComponent;

Answer 1

1. install sass

npm install --save-dev sass

2. Disable css-modules component styling in Next.js

In the next.config.js, add the following config:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  // disable css-modules component styling
  webpack(config) {
    config.module.rules.forEach((rule) => {
      const { oneOf } = rule;
      if (oneOf) {
        oneOf.forEach((one) => {
          if (!`${one.issuer?.and}`.includes('_app')) return;
          one.issuer.and = [path.resolve(__dirname)];
        });
      }
    })
    return config;
  },
}

module.exports = nextConfig

Verified in next.js version: v12.3~v13.x

See example: No CSS modules in next.js app: (json5 app)