Support both global and local style?

[thedv91]

Follow:
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

[thedv91]

I think our project needs both global style and local style.
Can make more flexible?

[felixmosh]

It can be simplified by using the oneOf webpack feature.

I've managed to change the config from outside by using this in next.config.js file:

config.module.rules.forEach(rule => {
  if (rule.test.toString().includes('.scss')) {
    rule.rules = rule.use.map(useRule => {
      if (typeof useRule === 'string') {
        return {
          loader: useRule,
        };
      }
      if (useRule.loader.startsWith('css-loader')) {
        return {
          oneOf: [
            {
              test: /\.global\.scss$/,
              loader: useRule.loader,
              options: {
                ...useRule.options,
                modules: false,
              },
            },
            {
              loader: useRule.loader,
              options: useRule.options,
            },
          ],
        };
      }

      return useRule;
    });

    delete rule.use;
  }
});

@thedv91 WDYT?

[thedv91]

@felixmosh yep I think we can customize next.config.js but I want to support options from packages

[jlmakes]

Damn @felixmosh that should be a part of the docs.

[felixmosh]

I want it to be part of next-scss/css :)

[bez4pieci]

Please add this, it is super useful during migration to CSS Components.

[icewheel]

this is the missing feature that will be very helpful.

[timneutkens]

I'm going to close this in favor of vercel/next.js#8626

Thanks for your contribution 🙏

[warriv93]

Great work, thank you!