反应汇总没有顺风 css 和 css 的样式

Question

我想用 rollup 构建一个 npm 包，但样式不可用。我想使用 tailwindcss、css 或 scss 的样式。我用演示代码创建了一个 repo 来演示这个问题。您可以执行 README.md 中的步骤，然后您会看到未应用样式 Repo

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

Answer 1

由于汇总配置中的 PostCSS“模块”选项，Bootstrap 样式不起作用。此选项为 class 名称添加前缀（您可以在 dist/index.css 生成的文件中看到它，通过查找“bootstrap-min”）以避免冲突，但在我们的例子中我们想要 Bootstrap 样式是全局的。

postcss({
  minimize: true,
  modules: true, // <--- this line

  extract: true,
}),

通过删除它，生成的 Bootstrap CSS 没有任何 CSS 模块前缀。

关于 Tailwind，您必须安装 of Tailwind and configure its PostCSS plugin in the rollup config, like described in https://samrobbins.uk/blog/tailwind-component-library

反应汇总没有顺风 css 和 css 的样式

react rollup no styling with tailwind css and css

javascript

css

rollup

reactjs