React - Next.js configuration with cssModules and url-loader

Question

I need to configure next.config.js file in order to use in the same time two different loaders. This is the first:

const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
})

And this is the second:

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

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        })
        return config
    }
}))

Individually they work great! But I'm not able to combine them in a single rule so that both can work together.

Thanks for your help!!

Answer 1

You should use next-compose-plugins. Here is a link below for additional reference.

How can I combine multiple loaders (CSS, LESS, ttf, etc) in NextJS config file?

But the code below should solve your issue:

Install

yarn add --dev @zeit/next-css
yarn add --dev @zeit/next-sass file-loader url-loader

Update your next.config.js file

const withPlugins = require('next-compose-plugins');
const sass = require("@zeit/next-sass")
const css = require("@zeit/next-css")

const nextConfig = {
  webpack: function (config) {
  config.module.rules.push({
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
    use: {
    loader: 'url-loader',
      options: {
        limit: 100000,
        name: '[name].[ext]'
      }
    }
  })
  return config
  }
}

module.exports = withPlugins([
  [css],
  [sass, {
     cssModules: true
   }]
], nextConfig);

Note: You should now be able to import scss modules like this:

import styles from 'your-file-name.module.scss'

Note: Watch out for vendors libs that are not formatted properly in that case you should import as follows:

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";