توافق 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

محمد أبو عواد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية