reactjs Swiper JS导入CSS在Next 13上不工作

u3r8eeie 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(149)

我有这个组件，我从Swiper JS导入所需的和模块到组件。由于某种原因，文件无法导入或根本无法工作。这只发生在使用Next 13时。是否有类似技巧或解决方案的东西？

"use client";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
// import required modules
import { Pagination } from "swiper";
export default function Home() {
  return (
    <Swiper
      pagination={{
        dynamicBullets: true,
      }}
      modules={[Pagination]}
      className="mySwiper"
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
      <SwiperSlide>Slide 6</SwiperSlide>
      <SwiperSlide>Slide 7</SwiperSlide>
      <SwiperSlide>Slide 8</SwiperSlide>
      <SwiperSlide>Slide 9</SwiperSlide>
    </Swiper>
  );
}

Package.json:

{
  "name": "swiper-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.35",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.2.4",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swiper": "9.1.1",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }
}

reactjs

来源：https://stackoverflow.com/questions/75999237/swiper-js-import-css-not-working-on-next-13

2条答案

按热度按时间

0dxa2lsx1#

方法一：

尝试使用CDN。

不使用实验/app目录：

在***pages文件夹中创建一个名为_document.js***的文件，然后添加swiperjs css CDN。

// _document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
  return (
    <Html>
      <Head>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

使用实验/app目录：

编辑***app/layout.tsx***文件（注意：它可以是layout.js、layout.jsx、layout.ts、layout.tsx，具体取决于您的项目）

// app/layout.tsx
export default function RootLayout({
  // Layouts must accept a children prop.
  // This will be populated with nested layouts or pages
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

方法二：

尝试在Next.js项目中启用***es-modules-support***。
要做到这一点：编辑***next.config.js***文件。并放入以下内容：

// next.config.js 
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
  // other configuration here...
};