I'm using Nextjs and for style, Sass is used. In production mode, I see a lot of css files that are loaded in a sequential manner. I want to load just one css. After some search, I find MiniCssExtractPlugin that can be useful and use in next.config.js. I don't know how to use it. can anyone help me?
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,
);in the documentation of mini-css-extract-plugin, use these codes
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"],
},
],
},
};but I don't know how to add these codes in my next.config.js file