使用 rollup、postcss 和 tailwind 框架打包使用 lit-element 制作的 web 组件

Posted 2023-03-07

【中文标题】使用 rollup、postcss 和 tailwind 框架打包使用 lit-element 制作的 web 组件

【英文标题】：Packaging web component made with lit-element using rollup, postcss and tailwind framework

【发布时间】：2020-11-21 16:07:36

【问题描述】：

我正在尝试使用rollup 打包程序的postcss 插件将使用lit-element/lit-html 编写的工作Web 组件与tailwind 框架打包。

在rollup 之后的dist/ 目标文件夹中，我找到了正确编译的js 和html，但没有找到postcss 之后的css。我尝试了很多事情都没有成功...

dist/index.js 
dist/index.html
dit/webcomponents-loader.js

如果您想测试，也可以使用代码：https://gitlab.univ-rouen.fr/sreycoyrehourcq/web-components.git

我的postcss.config.js

module.exports = 
    plugins: [
        require("tailwindcss"),
        require("postcss-import"),
    ]

我也尝试不加载 potcss.config。

我的rollup.config.js

import postcss from 'rollup-plugin-postcss'
import postcssImport from 'postcss-import';

import copy from 'rollup-plugin-copy';
import typescript from '@rollup/plugin-typescript';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import path from 'path'

const extensions = ['.js', '.jsx', '.ts', '.tsx', '.mjs'];
const outputDir = './dist/';

export default 
    input: './src/index.ts',
    output: 
        dir: outputDir,
        sourcemap: true,
        format: 'esm',
    ,
    plugins: [
        resolve( extensions ),
        commonjs(),
        typescript(),
        copy(
            targets: [
                 src: './src/index.html', dest: outputDir ,
                 src: './node_modules/@webcomponents/webcomponentsjs/bundles/', dest: outputDir ,
                
                    src: './node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
                    dest: outputDir
                
            ]
        ),
        postcss(
            plugins: [
                postcssImport()
            ],
            config: 
                path: "./postcss.config.js",
            ,
            extract: path.resolve('dist/main.css'),
            module: false
        )
    ]

我也尝试使用这个块：

postcss(
    config: false,
    plugins: [
        tailwind(),
        postcssImport()
    ],
    extract: true,
    module: false
),

我的main.css：

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

我的package.json：

    
  "scripts": 
    "build": "rollup -c rollup.config.js",
    "start:build": "yarn run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open"
  ,
  "devDependencies": 
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@webcomponents/webcomponentsjs": "^2.4.4",
    "rollup-plugin-html": "^0.2.1",
    "rollup-plugin-postcss": "^3.1.3"
  ,
  "dependencies": 
    "@rollup/plugin-typescript": "^5.0.2",
    "es-dev-server": "^1.57.1",
    "lit-element": "^2.3.1",
    "postcss-import": "^12.0.1",
    "postcss-nested": "^4.2.3",
    "postcss-preset-env": "^6.7.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "tailwindcss": "^1.6.0",
    "typescript": "^3.9.7"
  

【参考方案1】：

您应该在./src/index.ts 中导入main.css 并运行yarn build。

...
import "./checkable-elements";
import "./hover-target";

// import main.css
import "./main.css";
...

构建结果如下，生成main.css

$ tree dist/ -L 1
dist/
├── bundles
├── index.html
├── index.js
├── index.js.map
├── main.css
└── webcomponents-loader.js

【讨论】：

哇，这太容易了，我不明白为什么我的其他尝试和测试不起作用:( ...谢谢！