Does not work in NextJS 13 with app folder
sknightq opened this issue · comments
My dependencies
"next-with-less": "^3.0.1",
"next": "13.4.6",
"tailwindcss": "3.3.2",
"postcss": "8.4.24",
"autoprefixer": "10.4.14",
"antd": "^4.24.10",
"less": "^4.1.3",
"less-loader": "^11.1.3",
There is no pages folder in my project. I'm using the app folder. In the root of app I have two files: layout.tsx and page.tsx. As the offical document said : I can import the global styles in the layout file, but the style of ant is not rendered in my web app.
/** app/layout.tsx **/
import "antd/dist/antd.less" // not work!
// import "antd/dist/antd.css" // The styles without custom colors can be renderer if i using "antd/dist/antd.css" instead
import '@/assets/styles/global.css'
import '@/assets/styles/tailwind.css'
export const metadata = {
title: 'my title',
description: 'my description',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="overflow-hidden">{children}</body>
</html>
)
}
/** next.config.js **/
/** @type {import('next').NextConfig} */
const customColors = require("./env/color-variables");
const withPlugins = require("next-compose-plugins");
const withLess = require("next-with-less");
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
};
module.exports = withPlugins(
[
[
withLess,
{
lessLoaderOptions: {
lessOptions: {
modifyVars: customColors,
},
},
compiler: {
styledComponents: true,
},
},
],
],
nextConfig
);
Do i miss somthing?
+1 same behavior. Works with pages folder and not working in app folder
+1 Not working with app folder
+1 same here
+1
+1 not working with app folder.
Please help!
@ateix17 came up with a solution for the app directory in a separate issue: #28 (comment)
@nmiddendorff that doesn't work. After wasting 2 days of work I had to start afresh with the pages router...