反应与 Nextjs 的光滑兼容性
Posted
技术标签:
【中文标题】反应与 Nextjs 的光滑兼容性【英文标题】：React slick compatibility with Nextjs 【发布时间】：2021-09-22 16:13:39 【问题描述】：我打算将 React-slick 库添加到我的 nextjs 项目中以用于图像滑块，但遇到了问题
尝试安装 docs 中提到的“react-slick”和“slick-carousel”
yarn add react-slick
yarn add slick-carousel
但是一旦我在我的 _app.tsx 文件中导入 css 就会出错
找不到模块：无法解析 '~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"
【问题讨论】：
【参考方案1】：隔离您的轮播组件并添加以下位：
第一：
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>
【讨论】：
【参考方案2】：刚刚去掉了波浪号前缀
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
Codesandbox Demo
【讨论】：
以上是关于反应与 Nextjs 的光滑兼容性的主要内容，如果未能解决你的问题，请参考以下文章