Question

我正在研究Reactjs中的第三方分页组件。和npm包说包括 导入文件中的“ rc-pagination / assets / index.css”; 行。

但是没有应用样式。样式加载器将 index.css 注入到DOM中，但是当执行inspect元素时，我无法在HTML标记中看到模块化的className。

这是我的webpack配置：（我正在使用create-react-app v2）

const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
        isEnvDevelopment && require.resolve("style-loader"),
        isEnvProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: Object.assign(
                {},
                shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined
            ),
        },
        {
            loader: require.resolve("css-loader"),
            options:{
                importLoaders: 1,
                modules: true,
                localIdentName: "[name]__[local]__[hash:base64:5]"
            },
        },
        {
            // Options for PostCSS as we reference these options twice
            // Adds vendor prefixing based on your specified browser support in
            // package.json
            loader: require.resolve("postcss-loader"),
            options: {
                // Necessary for external CSS imports to work
                // https://github.com/facebook/create-react-app/issues/2677
                ident: "postcss",
                plugins: () => [
                    require("postcss-flexbugs-fixes"),
                    require("postcss-preset-env")({
                        autoprefixer: {
                            flexbox: "no-2009",
                        },
                        stage: 3,
                    }),
                ],
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        },
        {
            loader: "sass-loader",
            options: {
                implementation: require("node-sass")
            }
        },
    ].filter(Boolean);
    if (preProcessor) {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        });
    }
    return loaders;
};

[注意：这仅来自create-react-app]

    {
                        test: cssRegex,
                        exclude: cssModuleRegex,
                        use: getStyleLoaders({
                            importLoaders: 1,
                            sourceMap: isEnvProduction && shouldUseSourceMap,
                        }),


                    {
                        test: cssModuleRegex,
                        use: getStyleLoaders({
                            importLoaders: 1,
                            sourceMap: isEnvProduction && shouldUseSourceMap,
                            modules: true,
                            getLocalIdent: getCSSModuleLocalIdent,
                        }),
                    },

import React ,{ Component } from "react";
import Pagination from "rc-pagination";
import "rc-pagination/assets/index.css";

class WebsiteFooter extends Component {
    state = {
    	current: 3,
    };
      onChange = (page) => {
      	console.log(page);
      	this.setState({
      		current: page,
      	});
      }
      render() {
      	return (
      		<div>
                  sxscs
      			<Pagination
      				onChange={this.onChange}
      				current={this.state.current}
      				total={80}
      				showLessItems
      				showTitle={false}
      			/>
      		</div>
      	);
      }
}

export default WebsiteFooter;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这就是我的DOM的样子：

请帮助我！我搜索了所有内容，但找不到任何内容。

Answer 1

在webpack文件中，尝试将css loader对象更改为：

AppbarLayout

Answer 2

查看代码后，您似乎拥有分页组件，应在其中应用index.css中定义的CSS类，因此应将index.css导入分页组件中，而不要导入WebsiteFooter组件中。

我希望这能解决您的问题！

反应中的样式不可见？

2 个答案: