Chained loaders, how to use?

[victorbueno]

In my project, we neet both next-css and next-sass. I'm trying to configure them both with no success. Style.css do not receive the compilated styles. Here is my actual next.config.js

const withPlugins = require('next-compose-plugins');
const nextConfig = {
  webpack: (config) => {
    config.node = {
      fs: 'empty'
    }

    return config
  }
}

const withSass = require('@zeit/next-sass')
const withSassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
}

const withCSS = require('@zeit/next-css')
const withCSSConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
}

module.exports = withPlugins([
  [withSass, withSassConfig], [withCSS, withCSSConfig]
], nextConfig);

In another github issue, they say this:

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

I'm not finding a way to enable de same chaining option (withCSS(withSass()) in my configurations. Any ideas on how to configure it? Thanks in advance.

[cyrilwanner]

Hi @victorbueno

Your config actually looks correct and I just created a new empty project with it. I had two separate files (one .scss and a .css) and both styles ended up in the same styles.css after build, so it worked for me.

When you have

// next.config.js
module.exports = withPlugins([
  [withSass, withSassConfig], [withCSS, withCSSConfig]
], nextConfig);

it is actually the same in the end as when you would have chained it with withCSS(withSass(options)).

So I think the error is maybe somewhere else.. Can you tell me which versions of the packages you have? (next, next-compose-plugins, @zeit/next-sass and @zeit/next-css) And is this really the whole next.config.js file or did you only paste the relevant parts here? And how do you import the styles in your component? Do you import sass & css files in the same components or does one use sass and another css etc? Does the issue occur in dev and prod builds or only in one?

These questions will hopefully help to pinpoint the issue. Thank you :)

[victorbueno]

Hi @cyrilwanner.

That was all my file. It may be an error on my end since I'm very new to the React world.

I installed all those packages simple by "yarn add", not specifying the version. So, I think they were all on the latest version.

What I ended up doing was keeping only the [withSass, withSassConfig] configs.

From that, I imported the outside components CSS using @import inside my SCSS file. This worked.

Thank you for the help!

[cyrstron]

There is a bug with CSS and Sass concurrent usage #127

This helped me:

const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');

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

module.exports = withPlugins([
  [withCSS, {
    webpack(config) {
      config = commonsChunkConfig(config, /\.(sass|scss|css)$/);
      return config;
    },
  }],
  [withSass, {}],
], {});