In the next.js document, component-level CSS is only supported by CSS Modules. There is no configuration to disable CSS Modules. The following article will show you how to use non-css-module styling in next.js.
Verified in next.js version: v12.3.1 (Sept, 2022)
In the next.config.js, add the following config:
/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
// Disable css--modules component styling
// Source: https://cwtuan.blogspot.com/2022/10/disable-css-module-in-nextjs-v1231-sept.html
webpack(config) {
config.module.rules.forEach((rule) => {
const { oneOf } = rule;
if (oneOf) {
oneOf.forEach((one) => {
if (!`${one.issuer?.and}`.includes('_app')) return;
one.issuer.and = [path.resolve(__dirname)];
});
}
})
return config;
},
}
module.exports = nextConfig
