React-responsive-carousel样式不起作用

Question

我正试图将react-responsive-carousel添加到我的NextJS项目。当我运行npm run dev一切似乎都很好，但是我的旋转木马渲染没有样式。

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires loader
const MyCarousel = () => {
return (
<Carousel
autoPlay
interval={2500}
showArrows={true}
>
<div>content</div>
<div>content</div>
<div>content</div>
</Carousel>
)
}

文档说样式需要一个加载器，所以我配置next.config.js如下

const withLess = require('@zeit/next-less');
const withCss = require('@zeit/next-css');
const withImage = require('next-images');
const theme = require('./app/styles/antdoverrides');
module.exports = withImage(
withCss({
cssModules: true,
optimizeFonts: false,
...withLess({
lessLoaderOptions: {
javascriptEnabled: true,
importLoaders: 0,
modifyVars: {
...theme,
},
},
cssLoaderOptions: {
importLoaders: 3,
localIdentName: '[local]___[hash:base64:5]',
},
webpack5: false,
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd/.*?/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
}),
}),

);

仍然没有得到期望的结果。欢迎任何提示

Answer 1

如果不使用对象，则需要在_app.js文件中导入样式。只需在_app中导入你的样式，就像:

import "../styles/globals.css";

你还需要npm run local或类似的东西，检查你的package.json文件在本地运行你的项目，而不是构建