javascript - 在另一个 React 元素中作为依赖项安装时，自定义 React 组件库不加载 CSS

Question

我正在尝试使用汇总、css-modules 和 tailwind css 创建一个自定义 react 组件库。问题是当我尝试将它安装到另一个 react 元素中时，样式表中的 css 未加载。
文件夹结构如下

src
 ┣ SimpleAlert
 ┃ ┣ SimpleAlert.js
 ┃ ┣ SimpleAlert.module.css
 ┃ ┗ styles.css
 ┣ assets
 ┃ ┗ tailwind.css
 ┗ index.js

我的配置如下
rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import babel from "@rollup/plugin-babel";

const packageJson = require("./package.json");

export default {
    input: "src/index.js",
    output: [
        {
            file: packageJson.main,
            format: "cjs",
            sourcemap: true,
        },
        {
            file: packageJson.module,
            format: "esm",
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        // ref: https://stackoverflow.com/a/52885295
        babel({
            exclude: "node_modules/**",
            babelHelpers: "bundled",
        }),
        commonjs(),
        postcss({
            modules: true,
            plugins: [],
            extensions: [".css"],
        }),
    ],
};

postcss.config.js

module.exports = {
    plugins: [require("tailwindcss"), require("autoprefixer")],
};

包.json

{
    "name": "simple-react-alerts",
    "version": "1.0.0",
    "description": "Simple alert components for react",
    "main": "build/index.js",
    "module": "build/index.esm.js",
    "files": [
        "build"
    ],
    "repository": "git@github.com:Bsd15/simple-react-alerts.git",
    "author": "BSD",
    "license": "MIT",
    "private": false,
    "devDependencies": {
        "@babel/core": "^7.10.4",
        "@babel/preset-env": "^7.10.4",
        "@babel/preset-react": "^7.10.4",
        "@rollup/plugin-babel": "^5.0.4",
        "@rollup/plugin-commonjs": "^13.0.0",
        "@rollup/plugin-node-resolve": "^8.1.0",
        "babel-loader": "^8.1.0",
        "eslint": "^7.4.0",
        "eslint-plugin-react": "^7.20.3",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "rollup": "^2.21.0",
        "rollup-plugin-peer-deps-external": "^2.2.3",
        "rollup-plugin-postcss": "^3.1.2",
        "tailwindcss": "^1.4.6"
    },
    "peerDependencies": {
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
        "tailwindcss": ">=1.4.6"
    },
    "scripts": {
        "build": "rollup -c",
        "build:css": " yarn tailwindcss build src/assets/tailwind.css -o src/SimpleAlert/index.css                                             "
    }
}

index.js

import SimpleAlert from "./SimpleAlert/SimpleAlert";
import { AlertType } from "./SimpleAlert/SimpleAlert";
import "./SimpleAlert/styles.css";
export { SimpleAlert, AlertType };

SimpleAlert.js

import React, { useState, useCallback } from "react";
import "./styles.css";
import classes from "./SimpleAlert.module.css";

export const AlertType = {
    Primary: "border-blue-500",
    Danger: "border-red-600",
    Info: "border-yellow-500",
    Success: "border-green-500",
};

const SimpleAlert = (WrappedComponent) => {
    const ComponentWithAlert = (props) => {
        const [show, setShow] = useState(false);
        const [alertHeading, setAlertHeading] = useState("");
        const [alertMessage, setAlertMessage] = useState("");
        const [alertBoxBorderClass, setalertBoxBorderClass] = useState(
            AlertType.Primary
        );

        const showAlertBox = useCallback(() => {
            setShow(true);
        }, []);

        const hideAlertBox = useCallback(() => {
            setShow(false);
        }, []);

        const showAlert = useCallback(
            (message, alertType, heading = "") => {
                if (message) {
                    setAlertMessage(message);
                    setalertBoxBorderClass(alertType);
                    setAlertHeading(heading);
                    showAlertBox();
                }
            },
            [showAlertBox, setAlertMessage, setalertBoxBorderClass, setAlertHeading]
        );

        const showTemporaryAlert = useCallback(
            (message, alertType, timeout = 5000, heading = "") => {
                if (message) {
                    setAlertMessage(message);
                    setalertBoxBorderClass(alertType);
                    setAlertHeading(heading);
                    showAlertBox();
                    setTimeout(() => {
                        hideAlertBox();
                    }, timeout);
                }
            },
            [
                showAlertBox,
                setAlertMessage,
                setalertBoxBorderClass,
                setAlertHeading,
                hideAlertBox,
            ]
        );

        return (
            <React.Fragment>
                <WrappedComponent
                    {...props}
                    showAlert={showAlert}
                    showTemporaryAlert={showTemporaryAlert}
                />
                <article
                    className={`fixed bottom-0 left-0 right-0 mx-auto container w-full lg:w-1/2 p-2 bg-white shadow-2xl border-t-8 ${alertBoxBorderClass} ${
                        classes.alertBox
                    } ${show ? classes.alertBoxShow : ""}`}
                >
                    <section id="content" className="flex flex-col items-center">
                        <section id="message" className="h-16 overflow-y-auto">
                            {alertHeading && (
                                <h1 className="font-bold text-lg">{alertHeading}</h1>
                            )}
                            <p>{alertMessage}</p>
                        </section>
                        <section id="close">
                            <button
                                className="bg-red-200 hover:bg-red-300 text-red-700 font-bold p-2 w-20"
                                onClick={hideAlertBox}
                            >
                                Close
                            </button>
                        </section>
                    </section>
                </article>
            </React.Fragment>
        );
    };
    return ComponentWithAlert;
};

export default SimpleAlert;

SimpleAlert.module.css

.alertBox {
    /* This timing applies on the way OUT */
    transition-timing-function: ease-in;

    /* Quick on the way out */
    transition: 0.2s;

    /* Hide thing by pushing it outside by default */
    transform: translateY(130%);
}

.alertBoxShow {
    /* This timing applies on the way IN */
    transition-timing-function: ease-out;

    /* A litttttle slower on the way in */
    transition: 0.25s;

    /* Move into place */
    transform: translateY(0);
}

styles.css 是使用 tailwindcss 生成的(80k+ 多行 css，因此不发布)
该组件是一个 hoc，可用于在导出时与另一个组件重叠。
例如如下

export default SimpleAlert(App)

问题是styles.css 中的css。当组件库作为依赖项安装到另一个 react 应用程序中时，它不会被应用。 SimpleAlert.module.css 中的类正在加载。

Answer 1

导入在 index.js 或 index.ts 中汇总的样式包，这是主应用程序的启动文件。
像下面这样。

import "react-toggle-button/dist/esm/index.css";