Next.js: How to implement next-css and next-sass simultanously?

[jaqua]

I'm using the new next-css and configure webpack at the same time. So my next.config.js looks like this:

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  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
  }
})

Now I also need to use SASS files.

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
module.exports = withCSS({
  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
  }
})
module.exports = withSass()

But this seems to be wrong, as I get the error, that no correct loader for @import(url.... at my semantic.min.css is used.

[Ehesp]

Try:

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

[wkrueger]

Leaving my test case here (might be another factor or lucky race conditions, but w/e)

• withTypescript(withCSS(withSass(opts))) works on production mode, fails on dev mode
• withSass(withTypescript(withCSS(opts))) works on dev mode, fais on production mode
• Adding the url-loader didnt make a difference.