CODEWITHSUNDEEP
webpacknext.jswebpack-style-loader
Mati Tucci
Mati Tucci

Reputation: 2976

Add css loader to next.config.js

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

Upvotes: 4

Views: 13229

Answers (2)

Stephen Thomas
Stephen Thomas

Reputation: 41

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"],
        },
      ],
    },
  },

Upvotes: 0

Darryl RN
Darryl RN

Reputation: 8228

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

Upvotes: 3

Related Questions