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;

Depurate

Import that stylesheet in _app? Ref: Adding a Global Stylesheet, or maybe do something like this: stackoverflow.com/a/68531573, or this: stackoverflow.com/a/68045052 – Trail

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)

Amputee

Doesn't answer how to use scss, but it is an interesting idea, to extend/overwrite the nextjs webpack config. Maybe I can just add in an additional handler for importing scss. – Depurate

@SteveTomlin I hava updated how to use scss in next.js. – Amputee

You are my hero. – Latrell

Answer 2

You could do that with the withSass() function provided @zeit/next-sass plugin but it is now deprecated.

https://www.npmjs.com/package/@zeit/next-sass

Schindler

Thanks but if its deprecated is no good unless I downgrade, which is not ideal. Webpack is still the better option here – Depurate