Estoy usando Nextjs y para el estilo, se usa Sass. En el modo de producción, veo muchos archivos css que se cargan de manera secuencial. Quiero cargar solo un css. Después de algunas búsquedas, encontré MiniCssExtractPlugin que puede ser útil y usar en next.config.js. No sé cómo usarlo. ¿Alguien puede ayudarme?
const withPlugins = require("next-compose-plugins"); const nextTranslate = require("next-translate"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const withPWA = require("next-pwa"); const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true", }); // next.js configuration const nextConfig = { images: { domains: ['ibexcdn.com'], }, }; module.exports = withPlugins( [ [ nextTranslate, { webpack: (config, { isServer, webpack }) => { return config; }, }, ], withBundleAnalyzer, [ withPWA, { pwa: { disable: process.env.NODE_ENV === "development", dest: 'public', runtimeCaching: [ { urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i, handler: 'NetworkFirst', options: { cacheName: 'static-font-assets', expiration: { maxEntries: 4, maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days } } } ] }, }, ], ], nextConfig, );en la documentación de mini-css-extract-plugin, use estos códigos
module.exports = { optimization: { splitChunks: { cacheGroups: { styles: { name: "styles", type: "css/mini-extract", chunks: "all", enforce: true, }, }, }, }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", }), ], module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, };pero no sé cómo agregar estos códigos en mi archivo next.config.js