标签: rollup-plugin-postcss

如果这是一个明显的问题，我很抱歉，这是我第一次尝试构建组件库。

我正在使用 Tailwind CSS 3 构建 React 组件库。当我使用 Storybook 运行组件时，它们会按预期显示。但是，当我与 Rollup 捆绑时，会应用类名称，但 CSS 不包含在构建中。

这是我的tailwind.config.js文件：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

我的rollup.config.js文件：

import babel from 'rollup-plugin-babel';
import external from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

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

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        config: …

是否有任何 rollup.js 插件允许混淆/破坏 CSS 类名？除了 webpack 之外，我什么也没找到： https: //github.com/sndyuk/mangle-css-class-webpack-plugin

我正在开发一个汇总插件来处理插件用户的项目文件的一部分（js，sass，css等），但如果用户在他或她的项目中有另一个插件，例如postcss，它将重新处理我的插件的文件已处理，并导致错误。

所以我想知道是否有一种常见的方法来标记已由我的插件处理的文件并将其从汇总构建链中删除，以便其他插件无法加载和处理它。

我在汇总维基中找不到任何有用的信息......

我需要配置 rollup-plugin-postcss 以仅修改某些文件的 CSS 类名称。我知道这对于 WebPack 是可能的，但我不知道如何使用 Rollup 来做到这一点。理想情况下，我想给出一个正则表达式来描述如何处理符合该条件的 CSS 文件。

这就是我的 rollup.config.js 的样子：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import babel from "rollup-plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";
import static_files from "rollup-plugin-static-files";
import image from "@rollup/plugin-image";

export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true,
    },
  ],
  plugins: [ …