React 与 Nextjs 的流畅兼容性

Question

我打算将 React-slick 库添加到我的图像滑块的 nextjs 项目中，但是遇到了问题

尝试按照

docs中所述安装“react-slick”和“slick-carousel”

yarn add react-slick
yarn add slick-carousel

但是当我在我的 _app.tsx 文件中导入 css 时，它给出了错误

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

_app.tsx 文件

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";               //here
import "~slick-carousel/slick/slick-theme.css";         //here

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;

next.config.js 文件

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
module.exports = withPlugins([], {});
module.exports = withImages();

package.json

{
  "name": "my_first_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "start": "next start",
    "test": "jest -c test/jest.config.js"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@reduxjs/toolkit": "^1.6.0",
    "@types/jest": "^27.0.1",
    "axios": "^0.21.4",
    "formik": "^2.2.9",
    "next": "10.2.0",
    "next-compose-plugins": "^2.2.1",
    "next-i18next": "^7.0.1",
    "next-images": "^1.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-query": "^3.23.2",
    "react-redux": "^7.2.4",
    "react-slick": "^0.28.1",
    "sass": "^1.32.5",
    "slick-carousel": "^1.8.1",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/node": "^14.14.13",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "dotenv": "^8.2.0",
    "identity-obj-proxy": "^3.0.0",
    "isomorphic-unfetch": "^3.1.0",
    "jest": "^26.6.3",
    "nock": "^13.0.6",
    "ts-jest": "^26.4.4",
    "typescript": "^4.1.3"
  }
}

Answer 1

刚刚删除波浪号前缀

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

Codesandbox Demo

Answer 2

隔离您的轮播组件并添加这些位：

第一个：

import Head from "next/head";

然后：

<Head>
  <link rel="stylesheet" type="text/css" charSet="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</Head>

React 与 Nextjs 的流畅兼容性

React slick compatibility with Nextjs

reactjs

react-slick

next.js

隔离您的轮播组件并添加这些位：