0.0.1-beta.3 • Published 9 months ago

@cocos-fe/vite-plugin-cocos-panel v0.0.1-beta.3

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

@cocos-fe/vite-plugin-cocos-panel

一个专为 vite 构建 cocos 面板的插件,它能将每个面板用到的 css 收集,并在输出构建文件的时候,将收集到的 css 塞入 panel 的 style 属性中。

假设如下的源码,我们在 面板的入口文件里导入了 css

import './style.css';

export default Editor.Panel.define({
    template: '<div id="app"></div>',
    $: {
        root: '#app',
    },
    ready() {},
    close() {},
});

在构建出的 js 中,我们动态创建了 style 属性,并将所有 css 都赋值给 style 属性。

'use strict';
const panel = Editor.Panel.define({
    template: '<div id="app"></div>',
    $: {
        root: '#app',
    },
    ready() {},
    close() {},
    style: /* css */ `
        body {
            font-size: 12px;
        }
    `,
});
module.exports = panel;