rollup打包tailwindcss问题

问题描述：

老师你好,我是基于lego-bricks组件库添加了tailwindcss,想做一些自己的组件,我在index.ts中引入main.css打包后(rollup.config.js也插入了postCss插件),就显示不出组件,反之不引入main.css打包后就可以显示组件,但是没有样式.问题就是rollup没有处理tailwindcss样式

尝试过的解决方式：

rollup-plugin-tailwincss 很久没有维护,执行报错

2. tailwincss的github中issue,看了也没解决

3.stackoverfllow也看过了

相关截图：

main.css:

rollup.config.js:

相关代码：

百度云:链接: https://pan.baidu.com/s/1LyHY59amw3SvjlYt0e1Y_g  密码: nwbr
--来自百度网盘超级会员V2的分享

备注:

lego-bricks组件库中LText中添加了一个带有tailwincss的button
lego 项目是在/view/index 中引入了 LText

嘻茶 2021-03-19

源自：业务组件库打包、发布，添加 CI/CD 4-5 生成两种格式的模块文件

收起

1回答

张轩回答被采纳获得+3积分 2021-03-19 20:57:31

同学你好说下解决过程。目的是将 postcss 的 import 以及 tailwind 的mixin成功运行，成功生成单独的 css 文件。注意将 css-only plugin 注释掉，这两个插件做的是一样的事情。

main.css 我修改成这样

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

.btn {
    @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

它的引入是在 index.ts 当中。

当前的 rollup 配置。

// css({output: 'bundle.css'}),
postcss({
    config: {
        path: "../postcss.config.js",
    },
    extensions: [".css"],
    extract: true,
}),

运行

成功，生成单独的css 文件 lego-components.esm.css,但是里面的内容和 main.css 完全一样。@import @apply 都原封不动的没有效果。

我怀疑 postcss.config.js 中的 plugins 没有生效。

// postcss.config.js
module.exports = {
plugins: [
    require("postcss-preset-env"),
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
// ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
]
};

查询文档以及 stackoverflow 得知，postcss 的插件要在 rollup 里面设定，修改为

//rollup.config.js
// 处理 import
import postcssImport from 'postcss-import';
// 处理 apply 以及内置 mixin
import tailwindcss from 'tailwindcss'；
...
postcss({
    config: {
        // 这里面的 plugins 没用
        path: "../postcss.config.js",
    },
    extensions: [".css"],
    extract: true,
    //modules: false, // set this option to false
    plugins: [postcssImport(), tailwindcss()]
}),

再次运行，再看lego-components.esm.css 成功～

// btn 样式已经生成
.btn {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    --bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237, 242, 247, var(--bg-opacity));
    --text-opacity: 1;
    color: #000;
    color: rgba(0, 0, 0, var(--text-opacity));
}
// 一大堆其他的也已经添加～

收起回答