Last week, I encountered a few CSS issues and stumbled upon the mini-css-extract-plugin. After reading an article recommending the use of CSS loaders, I decided to check if it would help by updating my next.config.js file. Initially, I added the mini-css-extract-plugin but later commented it out. Instead, I included these loaders: ['style-loader', 'css-loader', 'less-loader'] and organized all CSS in _app.js with proper SSR-based MaterialUI styling in _document.js.
const withImages = require('next-images')
module.exports = withImages()
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
// use: 'raw-loader',
// test: /\.(sass|less|css)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
ENV: JSON.stringify(process.env.ENV),
}
}))
return config
},
})