Question

希望这个问题使我发疯，您可以为我提供帮助。我在NextJs的着陆页中使用react-multi-carousel，并在另一个页面中渲染了另外两个carousel，而在开发环境中正确渲染样式时，在生产中无法正常工作。

我正在主CSS以及_app.js中导入样式表。我尝试了“一切”，这使我完全疯了。我要附加一些代码。

我有一个类似的react-datepicker问题，通过将_app.js头中的cdnjs链接起来解决了，但是react-multi-carousel似乎没有cdnjs。

这是_app.js

import React from 'react'
import Head from 'next/head';
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';
import 'react-multi-carousel/lib/styles.css';
import 'react-datepicker/dist/react-datepicker.css';
import '../public/styles/index.css';


function MyApp({ Component, pageProps, router }) {
  return (
    <>
      <Head>
        <title>Title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
      </Head>
      <div key={router.route}>
        <Component {...pageProps} />
      </div>
    </>
  )
}

export default MyApp;

index.css（我在路径public / styles / index.css中拥有它）

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

@import '~react-datepicker/dist/react-datepicker.css';

@import '~react-multi-carousel/lib/styles.css';

@import '~react-image-gallery/styles/css/image-gallery.css';

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@600&family=Lobster&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');

....

非常感谢您的帮助！

Nextjs和React-Multi-Carousel-生产版本无法正确呈现

0 个答案: