Next-plugins: How to add css and sass support with css modules?

[mitaxe]

The example below doesn't work. I haven' found any solutions.

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

module.exports = withCss(
  withSass({
    cssModules: true
  })
)

[capt4ce]

I stumbled upon the same problem. I solved it by filling my next.config.js with:

const path = require("path")
const withSass = require("@zeit/next-sass")
const withCss = require("@zeit/next-css")
const withPlugins = require("next-compose-plugins")

const dev = process.env.NODE_ENV !== "production"

module.exports = withPlugins([
  [
    withCss,
    {
      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
      },
    },
  ],
  [
    withSass,
    {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
      },
    },
  ],
])

[mitaxe]

Thank you! It works for me!

[yalopov]

It actually worked, thank you @capt4ce !

This should be at https://github.com/zeit/next-plugins/tree/master/packages/next-sass readme

[baj84]

Worked for me! Only issue is now I can't seem to include just a normal .scss file.