[英]Tailwind styles are not being applied after bundling with Rollup
抱歉,如果这是一个明显的问题,这是我第一次尝试构建组件库。
我正在使用 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 样式。
有人知道我哪里出错了吗? 我花了几个小时试图解决这个问题,所以非常感谢任何帮助。
我终于弄明白了。
我需要将我的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 包中。
在我尝试之后,我不敢相信它是如此简单。 我希望至少这个答案可以帮助其他人避免经历同样的痛苦和痛苦。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.