Add css loader to next.config.js

Question

Currently I have this next.config.js:

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
}

module.exports = withCSS(
  withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  )
)

I'm trying to use react-rce but in the docs they say that I need to add a style-loader to my webpack config.

E.g

 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

but I don't understand how to add it into my current file. Any ideas?

Thanks

AmerllicA · Accepted Answer · 2022-02-03 00:20:31Z

3

You can add additional module rules for css-loader in your file like this:

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
}

module.exports = withCSS(
  withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
      webpack: config => {
        config.module.rules.push(
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          }
        );
        return config;
      }
    })
  )
)

edited Feb 3, 2022 at 0:20

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

answered Aug 12, 2020 at 7:29

Darryl RN

8,4405 gold badges32 silver badges51 bronze badges

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

2 Comments

Mati Tucci Over a year ago

thanks! I had to add a return config to the bottom

Darryl RN Over a year ago

oo ya, i forgot to mention that, will update my answer

Stephen Thomas · Accepted Answer · 2023-07-22 21:31:55Z

0

You'll need to install css-loader, npm i css-loader. If you use NextJs. touch the next.config.js file and add the following code, save, and restart the server.

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  },

answered Jul 22, 2023 at 21:31

Stephen Thomas

413 bronze badges

Collectives™ on Stack Overflow

Add css loader to next.config.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related