bsd*_*bsd 8 javascript css reactjs rollupjs tailwind-css
我正在尝试使用 rollup、css-modules 和 tailwind css 创建自定义 React 组件库。问题是当我尝试将其安装到另一个反应项目中时，样式表中的 CSS 未加载。
\n文件夹结构如下
\nsrc\n \xe2\x94\xa3 SimpleAlert\n \xe2\x94\x83 \xe2\x94\xa3 SimpleAlert.js\n \xe2\x94\x83 \xe2\x94\xa3 SimpleAlert.module.css\n \xe2\x94\x83 \xe2\x94\x97 styles.css\n \xe2\x94\xa3 assets\n \xe2\x94\x83 \xe2\x94\x97 tailwind.css\n \xe2\x94\x97 index.js\n我的配置如下
\nrollup.config.js
\nsrc\n \xe2\x94\xa3 SimpleAlert\n \xe2\x94\x83 \xe2\x94\xa3 SimpleAlert.js\n \xe2\x94\x83 \xe2\x94\xa3 SimpleAlert.module.css\n \xe2\x94\x83 \xe2\x94\x97 styles.css\n \xe2\x94\xa3 assets\n \xe2\x94\x83 \xe2\x94\x97 tailwind.css\n \xe2\x94\x97 index.js\npostcss.config.js
\nimport peerDepsExternal from "rollup-plugin-peer-deps-external";\nimport resolve from "@rollup/plugin-node-resolve";\nimport commonjs from "@rollup/plugin-commonjs";\nimport postcss from "rollup-plugin-postcss";\nimport babel from "@rollup/plugin-babel";\n\nconst packageJson = require("./package.json");\n\nexport default {\n input: "src/index.js",\n output: [\n {\n file: packageJson.main,\n format: "cjs",\n sourcemap: true,\n },\n {\n file: packageJson.module,\n format: "esm",\n sourcemap: true,\n },\n ],\n plugins: [\n peerDepsExternal(),\n resolve(),\n // ref: https://stackoverflow.com/a/52885295\n babel({\n exclude: "node_modules/**",\n babelHelpers: "bundled",\n }),\n commonjs(),\n postcss({\n modules: true,\n plugins: [],\n extensions: [".css"],\n }),\n ],\n};\n包.json
\nmodule.exports = {\n plugins: [require("tailwindcss"), require("autoprefixer")],\n};\n索引.js
\n{\n "name": "simple-react-alerts",\n "version": "1.0.0",\n "description": "Simple alert components for react",\n "main": "build/index.js",\n "module": "build/index.esm.js",\n "files": [\n "build"\n ],\n "repository": "git@github.com:Bsd15/simple-react-alerts.git",\n "author": "BSD",\n "license": "MIT",\n "private": false,\n "devDependencies": {\n "@babel/core": "^7.10.4",\n "@babel/preset-env": "^7.10.4",\n "@babel/preset-react": "^7.10.4",\n "@rollup/plugin-babel": "^5.0.4",\n "@rollup/plugin-commonjs": "^13.0.0",\n "@rollup/plugin-node-resolve": "^8.1.0",\n "babel-loader": "^8.1.0",\n "eslint": "^7.4.0",\n "eslint-plugin-react": "^7.20.3",\n "react": "^16.13.1",\n "react-dom": "^16.13.1",\n "rollup": "^2.21.0",\n "rollup-plugin-peer-deps-external": "^2.2.3",\n "rollup-plugin-postcss": "^3.1.2",\n "tailwindcss": "^1.4.6"\n },\n "peerDependencies": {\n "react": ">=16.8.0",\n "react-dom": ">=16.8.0",\n "tailwindcss": ">=1.4.6"\n },\n "scripts": {\n "build": "rollup -c",\n "build:css": " yarn tailwindcss build src/assets/tailwind.css -o src/SimpleAlert/index.css "\n }\n}\nSimpleAlert.js
\nimport SimpleAlert from "./SimpleAlert/SimpleAlert";\nimport { AlertType } from "./SimpleAlert/SimpleAlert";\nimport "./SimpleAlert/styles.css";\nexport { SimpleAlert, AlertType };\nSimpleAlert.module.css
\nimport React, { useState, useCallback } from "react";\nimport "./styles.css";\nimport classes from "./SimpleAlert.module.css";\n\nexport const AlertType = {\n Primary: "border-blue-500",\n Danger: "border-red-600",\n Info: "border-yellow-500",\n Success: "border-green-500",\n};\n\nconst SimpleAlert = (WrappedComponent) => {\n const ComponentWithAlert = (props) => {\n const [show, setShow] = useState(false);\n const [alertHeading, setAlertHeading] = useState("");\n const [alertMessage, setAlertMessage] = useState("");\n const [alertBoxBorderClass, setalertBoxBorderClass] = useState(\n AlertType.Primary\n );\n\n const showAlertBox = useCallback(() => {\n setShow(true);\n }, []);\n\n const hideAlertBox = useCallback(() => {\n setShow(false);\n }, []);\n\n const showAlert = useCallback(\n (message, alertType, heading = "") => {\n if (message) {\n setAlertMessage(message);\n setalertBoxBorderClass(alertType);\n setAlertHeading(heading);\n showAlertBox();\n }\n },\n [showAlertBox, setAlertMessage, setalertBoxBorderClass, setAlertHeading]\n );\n\n const showTemporaryAlert = useCallback(\n (message, alertType, timeout = 5000, heading = "") => {\n if (message) {\n setAlertMessage(message);\n setalertBoxBorderClass(alertType);\n setAlertHeading(heading);\n showAlertBox();\n setTimeout(() => {\n hideAlertBox();\n }, timeout);\n }\n },\n [\n showAlertBox,\n setAlertMessage,\n setalertBoxBorderClass,\n setAlertHeading,\n hideAlertBox,\n ]\n );\n\n return (\n <React.Fragment>\n <WrappedComponent\n {...props}\n showAlert={showAlert}\n showTemporaryAlert={showTemporaryAlert}\n />\n <article\n 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} ${\n classes.alertBox\n } ${show ? classes.alertBoxShow : ""}`}\n >\n <section id="content" className="flex flex-col items-center">\n <section id="message" className="h-16 overflow-y-auto">\n {alertHeading && (\n <h1 className="font-bold text-lg">{alertHeading}</h1>\n )}\n <p>{alertMessage}</p>\n </section>\n <section id="close">\n <button\n className="bg-red-200 hover:bg-red-300 text-red-700 font-bold p-2 w-20"\n onClick={hideAlertBox}\n >\n Close\n </button>\n </section>\n </section>\n </article>\n </React.Fragment>\n );\n };\n return ComponentWithAlert;\n};\n\nexport default SimpleAlert;\nstyles.css 是使用 tailwindcss 生成的（有 80k+ 行 css，因此不发布）
\n该组件是一个临时组件，可用于在导出时重叠另一个组件。
\n例如如下
\n.alertBox {\n /* This timing applies on the way OUT */\n transition-timing-function: ease-in;\n\n /* Quick on the way out */\n transition: 0.2s;\n\n /* Hide thing by pushing it outside by default */\n transform: translateY(130%);\n}\n\n.alertBoxShow {\n /* This timing applies on the way IN */\n transition-timing-function: ease-out;\n\n /* A litttttle slower on the way in */\n transition: 0.25s;\n\n /* Move into place */\n transform: translateY(0);\n}\n问题是styles.css中存在的 css 。当组件库作为依赖项安装到另一个 React 应用程序中时，它不会被应用。SimpleAlert.module.css中的类正在加载。
\n小智 4
导入在主应用程序的启动文件index.js或index.ts中汇总的样式包。就像下面这样。
import "react-toggle-button/dist/esm/index.css";