reactjs - 与 Rollup 捆绑后未应用 Tailwind 样式

Question

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

我正在使用 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: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      }),
      babel({
        exclude: 'node_modules/**',
        presets: ['@babel/preset-react'],
      }),
      external(),
      resolve(),
      terser(),
    ],
  },
];

我的 postcss.config.js 文件:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

还有我的package.json 文件:

{
  "name": "@jro31/react-component-library",
  "version": "0.0.5",
  "description": "A library of React components",
  "scripts": {
    "rollup": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jro31/react-component-library.git"
  },
  "keywords": [
    "react",
    "components",
    "component-library",
    "react-component-library"
  ],
  "author": "Jethro Williams",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jro31/react-component-library/issues"
  },
  "homepage": "https://github.com/jro31/react-component-library#readme",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-react": "^7.17.12",
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "postcss": "^8.4.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rollup": "^2.75.7",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "tailwindcss": "^3.1.3"
  },
  "peerDependencies": {
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/jro31"
  }
}

我的 src/index.css 文件很简单:

@tailwind base;
@tailwind components;
@tailwind utilities;

我现在只有一个虚拟组件。基于此，当我运行 npm run storybook 时，我的组件按预期显示并应用了 Tailwind 样式。

但是，在运行 npm run rollup 时，dist/esm/index.js 文件生成如下:

import t from"react";const e=e=>t.createElement("button",{className:"text-9xl md:text-6xl bg-blue-400"},e.label);export{e as Button};
//# sourceMappingURL=index.js.map

它包括 Tailwind 类名，但不包括样式。因此，将此组件导入外部项目时，会应用类名，但不会应用 Tailwind 样式。

有人知道我哪里出错了吗？我花了几个小时试图解决这个问题，所以非常感谢您的帮助。

Answer 1

我终于明白了。

我需要将我的 src/index.css 文件导入我的组件。

我的 src/index.css 文件很简单:

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在我的 src/components/index.js 文件中我导入了这个文件:

import '../index.css';

export { default as Button } from './Button';

现在样式包含在 Rollup 包中。

在我尝试了所有之后，我简直不敢相信会这么简单。我希望至少这个答案可以帮助其他人避免经历同样的痛苦和磨难。