Quiero crear un paquete npm con resumen, pero el estilo no está disponible. Quiero usar estilo con tailwindcss, css o scss. Creé un repositorio con código de demostración para demostrar este problema. Puede hacer los pasos en README.md y luego verá que el estilo no se aplica Repo
Este es mi rollup.config.js
import babel from "@rollup/plugin-babel"; import image from "@rollup/plugin-image"; import json from "@rollup/plugin-json"; import commonjs from "rollup-plugin-commonjs"; import { nodeResolve } from "@rollup/plugin-node-resolve"; import replace from "@rollup/plugin-replace"; import sourcemaps from "rollup-plugin-sourcemaps"; import postcss from "rollup-plugin-postcss"; const input = "src/index.jsx"; var MODE = [ { fomart: "es", }, ]; var config = []; MODE.map((m) => { var conf = { input: input, output: { dir: `dist`, format: m.fomart, sourcemap: true, }, inlineDynamicImports: true, plugins: [ replace({ "process.env.NODE_ENV": JSON.stringify("development"), }), nodeResolve({ extensions: [".js", ".jsx"], }), postcss({ minimize: true, modules: true, extract: true, }), json(), image(), babel({ exclude: "node_modules/**", plugins: ["@babel/transform-runtime"], babelHelpers: "runtime", }), commonjs({ include: "node_modules/**", }), sourcemaps(), ], }; config.push(conf); }); export default [...config];Los estilos de Bootstrap no funcionan debido a la opción de "módulos" de PostCSS en la configuración del resumen. Esta opción antepone los nombres de clase (puede verlo en el archivo generado dist/index.css , buscando "bootstrap-min") para evitar conflictos, pero en nuestro caso queremos que los estilos de Bootstrap sean globales.
postcss({ minimize: true, modules: true, // <--- this line extract: true, }),al eliminarlo, el CSS de Bootstrap se genera sin ningún prefijo de módulo CSS.
Con respecto a Tailwind, debe instalar la compilación de compatibilidad de Tailwind y configurar su complemento PostCSS en la configuración del resumen, como se describe en https://samrobbins.uk/blog/tailwind-component-library