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

Answer 1

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