3

希望你能帮助我，因为这个问题让我发疯。我在 NextJs 中将 react-multi-carousel 用于我的登录页面，并在另一个页面中再渲染 2 个轮播，并且在开发环境中正确渲染应用样式时，在生产中无法正常工作。

我在主 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');

....

非常感谢您的帮助！

4

0 回答 0