const { StatsWriterPlugin } = require('webpack-stats-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/**
* @type {import('next').NextConfig} nextConfig
*/
const nextConfig = {
reactStrictMode: true,
webpack: (config, options) => {
config.stats = 'verbose';
const { dev, isServer } = options;
// Output webpack stats JSON file only for
// client-side/production build
if (!dev && !isServer) {
config.plugins.push(
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
chunks: true,
modules: true
}
})
);
}
config.optimization = {
...config.optimization,
splitChunks: {
cacheGroups: {
styles: {
name: "styles",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
},
},
};
config.plugins.push(
new MiniCssExtractPlugin({
filename: "static/css/[name].css",
})
);
config.module.rules.push(
{
test: /\.(scss|less|sass|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
sourceMap: true,
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
lessOptions: {
javascriptEnabled: true,
}
}
},
],
});
return config;
},
};
module.exports = nextConfig;
My layout.tsx
import type { Metadata } from "next";
// import { Inter } from "next/font/google";
const styles = require("./appStyles.less");
// import "./globals.css";
// import "./styles/importer.less"
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { Toaster } from "react-hot-toast";
// const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "FPMS",
description: "Frequency Planning & Management System",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link rel="stylesheet" href="/dependencies/bootstrap-4/bootstrap-4.css" />
<link rel="stylesheet" href="/dependencies/fontawesome.css" />
{/* <link rel="stylesheet" href="/static/css/globals.css" /> */}
</head>
<body>
<div id="page-wrap" className="login">
<Header />
<div id="view-wrap" className="container">
{children}
<Toaster />
</div>
<Footer />
</div>
</body>
</html>
);
}
If I edit the .less file to have a compilation error then the sass-loader will throw an error in the dev mode. When there are no errors, the less file is not even converted/nor included in the css, however the globals.css is, if included in index.tsx
The webpack-stats.json shows no sign of appStyless.less and I also have no idea how to debug to see which loader fails to generate output or where is everything breaking down.
Apparently all works without the app router.