Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does not work in NextJS 13 with app folder #37

Open
sknightq opened this issue Jun 21, 2023 · 7 comments
Open

Does not work in NextJS 13 with app folder #37

sknightq opened this issue Jun 21, 2023 · 7 comments

Comments

@sknightq
Copy link

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?
@ai-leonid
Copy link

+1 same behavior. Works with pages folder and not working in app folder

@BossBele
Copy link

+1 Not working with app folder

@sabreu-teknorix
Copy link

+1 same here

@HUANGXUANKUN
Copy link

+1

@nsuaifan
Copy link

+1 not working with app folder.

Please help!

@nmiddendorff
Copy link

@ateix17 came up with a solution for the app directory in a separate issue: #28 (comment)

@amunim
Copy link

amunim commented Jan 31, 2024

@nmiddendorff that doesn't work. After wasting 2 days of work I had to start afresh with the pages router...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@nsuaifan @sknightq @nmiddendorff @ai-leonid @amunim @BossBele @HUANGXUANKUN @sabreu-teknorix