React-responsive-carousel 样式不起作用答案

【问题标题】：React-responsive-carousel styles not workingReact-responsive-carousel 样式不起作用
【发布时间】：2021-12-02 12:40:56
【问题描述】：

我正在尝试将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;
        },
    }),
}),


);

仍然没有得到想要的结果。任何提示表示赞赏

【问题讨论】：

你不需要添加加载器来加载 CSS 文件，Next.js 已经内置了对它的支持。但是，您应该在自定义 _app 中导入任何全局 CSS。有关详细信息，请参阅Built-In CSS Support。

标签： css reactjs webpack next.js carousel

【解决方案1】：

如果您不使用这些对象，则需要将样式导入 _app.js 文件。只需在您的 _app 中导入您的样式，例如：

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

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

【讨论】：

他为什么需要npm run local？
我不使用 css，为什么我需要 import import "../styles/globals.css"; ?