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

Link Css file not working in Nextjs #2377

Open
PunkFleet opened this issue May 12, 2024 · 10 comments
Open

Link Css file not working in Nextjs #2377

PunkFleet opened this issue May 12, 2024 · 10 comments

Comments

@PunkFleet
Copy link

Guidelines for posting a new issue

  • Please replicate your issue with this CodeSandBox and provide a link to it along with the issue description
 <Head>
      <link
        rel="stylesheet"
        type="text/css"
        charSet="UTF-8"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
      />
      <link
        rel="stylesheet"
        type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
      />
    </Head>

But these file not loaded in rendering
@VMLuca
Copy link

VMLuca commented May 29, 2024

I would import it like this in the layout file if you use app router or in the _app file if you use page router.

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
@deku-redfox
Copy link

I would import it like this in the layout file if you use app router or in the _app file if you use page router.

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

This raise an Cannot resolve 'slick-carousel/slick/slick.css' issue on my project. I installed the package using the npm method and my project is using Nextjs 14.
@VMLuca
Copy link

VMLuca commented Jun 5, 2024 •
edited
Loading

You also need to install slick-carousel like it is described on the README, I think. Maybe this solves it.
@predmaxim
Copy link

predmaxim commented Jun 6, 2024 •
edited
Loading

I have the same problem. I installed everything according to the instructions
image
image
image
@VMLuca
Copy link

VMLuca commented Jun 17, 2024 •
edited
Loading

ah ok, I see you guys use next.js with turbopack. I ran into the same issue, somehow it is not working with turbopack I have no clue why. Just turn it off and it will work.
I think for the long run I switch to a library called "embla-carousel" it looks like it is better maintained than this library. There are a couple of more bugs I ran into.
@VMLuca
Copy link

VMLuca commented Jun 17, 2024

I have only tested it in my enterprise application so there are a lots of other dependency I thought that may be the cause. But if you can reproduce with a new next.js project would be nice if you either adjust the title of this issue or create a new issue and close this one.
@TechhDan
Copy link

TechhDan commented Jun 26, 2024 •
edited
Loading

I'm having issues importing the css. It doesn't seem to find the file. I'm using next JS.
image

{
  "name": "tms-software-next-v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^2.0.4",
    "@heroicons/react": "^2.1.4",
    "axios": "^1.7.2",
    "clsx": "^2.1.1",
    "js-cookie": "^3.0.5",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.2.1",
    "react-slick": "^0.30.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
@PunkFleet
Copy link
Author

ah ok, I see you guys use next.js with turbopack. I ran into the same issue, somehow it is not working with turbopack I have no clue why. Just turn it off and it will work. I think for the long run I switch to a library called "embla-carousel" it looks like it is better maintained then this library. There are a couple of more bugs I ran into.

I also given up this package
@MuhammadMujtabaa
Copy link

this issue was fixed for me after using the following code given below inside the _document.js file

/** @format */

import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        
        <link
          rel="stylesheet"
          type="text/css"
          charSet="UTF-8"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
        />
        <link
          rel="stylesheet"
          type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
@ignacio-dev
Copy link

Yeah, same issue with Vite in Laravel.. what a shame
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
7 participants
@TechhDan @MuhammadMujtabaa @ignacio-dev @predmaxim @PunkFleet @deku-redfox @VMLuca