反应中的样式不可见？

Question

我正在 Reactjs 中开发第三方分页组件。 npm 包说要包括 导入文件中的 "rc-pagination/assets/index.css"; 行 .

但是没有应用样式。样式加载器将 index.css 注入 DOM 但是在检查元素时，我看不到 HTML 标签中的模块化类名。

这是我的 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

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

希望这能解决您的问题！

Answer 2

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

       {
        loader: require.resolve("css-loader"),
        options:{
            importLoaders: 1,
            modules: true,
            localIdentName: "[local]"
        }

反应中的样式不可见？

styling in react is not visible?

javascript

reactjs

webpack

create-react-app

css-loader