Expose css/sass defaultLoaders in config options.

[Izhaki]

Describe the feature you'd like to request

NextJS already exposes defaultLoaders.babel, which can be used as follows to allow transpilation of soures outside the baseDir (in Monorepos):

module.exports = withBundleAnalyzer({
  webpack: (config, options) => {
    // To allow transpiling aliases
    config.module.rules.push({
      test: /\.+(js|jsx|mjs|ts|tsx)$/,
      use: options.defaultLoaders.babel,
      include: Object.values(aliases),
    });

    return config;
  },
});

Given the built-in support for CSS/SCSS in NextJS, full support for monorepo setup will require to allow importing css/scss (in addition to js/ts) files from directories outside the baseDir.

The issue with current workaround

The current way next-transpile-modules does it, is horribly hacky (@martpie):

        // Support CSS modules + global in node_modules
        // TODO ask Next.js maintainer to expose the css-loader via defaultLoaders
        const nextCssLoaders = config.module.rules.find((rule) => typeof rule.oneOf === 'object');

        // .module.css
        if (nextCssLoaders) {
          const nextCssLoader = nextCssLoaders.oneOf.find(
            (rule) => rule.sideEffects === false && regexEqual(rule.test, /\.module\.css$/)
          );

          const nextSassLoader = nextCssLoaders.oneOf.find(
            (rule) => rule.sideEffects === false && regexEqual(rule.test, /\.module\.(scss|sass)$/)
          );

          if (nextCssLoader) {
            nextCssLoader.issuer.or = nextCssLoader.issuer.and ? nextCssLoader.issuer.and.concat(matcher) : matcher;
            delete nextCssLoader.issuer.not;
            delete nextCssLoader.issuer.and;
          } else {
            console.warn('next-transpile-modules - could not find default CSS rule, CSS imports may not work');
          }

          if (nextSassLoader) {
            nextSassLoader.issuer.or = nextSassLoader.issuer.and ? nextSassLoader.issuer.and.concat(matcher) : matcher;
            delete nextSassLoader.issuer.not;
            delete nextSassLoader.issuer.and;
          } else {
            console.warn('next-transpile-modules - could not find default SASS rule, SASS imports may not work');
          }
        }

Describe the solution you'd like

options.defaultLoaders.css
options.defaultLoaders.sass

Describe alternatives you've considered

• next-transpile-modules (doesn't worked for me with latest version; regardless, this request will solidify the plugin).
• Experimental feature for allowing importing Typescript files outside of the root directory #22867 - No support for css/sass yet.

[martpie]

Oh hell yes! 👍