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;

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 — brc-dd
– brc-dd, Commented Jul 31, 2021 at 12:28

cwtuan · Accepted Answer · 2023-07-26 12:47:45Z

11

install sass

npm install --save-dev sass

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)

edited Jul 26, 2023 at 12:47

answered Oct 11, 2022 at 16:32

cwtuan

1,9171 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Inspiraller Over a year ago

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.

cwtuan Over a year ago

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

Or Assayag Over a year ago

You are my hero.

bellam · Accepted Answer · 2021-11-22 15:14:27Z

-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

answered Nov 22, 2021 at 15:14

bellam

1845 bronze badges

1 Comment

Inspiraller Over a year ago

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

Collectives™ on Stack Overflow

How to use scss without css modules in nextjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related