توافق react-slick مع nextjs

عبد النور محمد · 23 سبتمبر 2021

أخطط لإضافة مكتبة React-slick إلى مشروع nextjs الخاص لشريط تمرير الصور ولكن أواجه مشكلة

ولكن بمجرد أن أقوم باستيراد css في ملف _app.tsx الخاص بي ، فإنه يعطي خطأ

Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'

_app.js

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import "@styles/global.scss";
import { Provider } from "react-redux";
import store from "@redux/store";  
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "src/createMiuitheme";


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

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  // const theme = responsiveFontSizes(createTheme());
  return (
    <>
      <Head>
        <link rel="shortcut icon" href="#" />
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <meta name="theme-color" content={theme.palette.primary.main} />
      </Head>
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
        <CssBaseline />
          <Component {...pageProps} />
        </MuiThemeProvider>
      </Provider>
    </>
  );
}

export default MyApp;

محمد أبو عواد · 23 سبتمبر 2021

ربما لم تقم بتثبيت الحزمة, يمكنك تثبيتها كالتالي

 npm install slick-carousel --save

إذا كنت تستخدم yarn، يمكنك تثبيتها كالتالي

 yarn add slick-carousel

ثم قم باستيراد ملفات css الخاصة بالحزمة React-slick كالتالي

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

لا حاجة لاستخدام الاشارة "~"

توافق react-slick مع nextjs

السؤال

عبد النور محمد

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية