Next-plugins: If I need "next.js + css + less + scss", How to config ???

[minooo]

like this??

const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')
module.exports = withLess(withSass({ // options }))

[timneutkens]

Indeed.

[Everettss]

@timneutkens But with this approach, some of the configs is shared for both wrappers:

module.exports = withCSS(withSCSS({
    useFileSystemPublicRoutes: false,
    cssModules: true, // I want to set this flag only for .scss
}));

So how we can configure webapack to handle this situation?

javascript import 'extra-libray-from-npm/style.css' // I want to disable cssModules import s from './my-style.scss' // I want to enable cssModules

[manuquentin]

Same issue here, how can we use cssModules only for files in node_modules ?

[Everettss]

@manuquentin It looks like the easiest solution will be adding resourceQuery with options to enable/disable CSS modules like this:

Modification of file https://github.com/zeit/next-plugins/blob/master/packages/next-css/index.js#L33-L43

const crateStyleConfig = cssModules => cssLoaderConfig(config, extractCSSPlugin, {
  cssModules,
  cssLoaderOptions,
  dev,
  isServer
});

options.defaultLoaders.css = crateStyleConfig(cssModules);

config.module.rules.push({
  test: /\.css$/,
  oneOf: [
    {
      resourceQuery: /cssModulesEnable/,
      use: crateStyleConfig(true)
    },
    {
      resourceQuery: /cssModulesDisbale/,
      use: crateStyleConfig(false)
    },
    {
      use: options.defaultLoaders.css
    }
  ]
})

So, with this modification you will be able to use it like this:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: true
})

import 'extra-libray-from-npm/style.css?cssModulesDisbale' // disable cssModules
import s from './my-style.css' // cssModules enabled by default (from next.config.js)

[justQing00]

You can view source code and change some setting.
Like next-lcss