refactor(client-side): add plugin to automatically inject ant design styles into html
This commit is contained in:
parent
5d600ef9da
commit
72da42f96a
42
plugins/ssrStyles.tsx
Normal file
42
plugins/ssrStyles.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { writeFileSync } from "fs";
|
||||||
|
import { extractStyle } from "ant-design-vue/lib/_util/static-style-extract";
|
||||||
|
import { ConfigProvider, theme } from "ant-design-vue";
|
||||||
|
|
||||||
|
const css = extractStyle((node) => (
|
||||||
|
<>
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
token: {
|
||||||
|
colorPrimary: "#f14668",
|
||||||
|
colorSuccess: "#2be396",
|
||||||
|
colorWarning: "#face14",
|
||||||
|
colorInfo: "#15c6e3",
|
||||||
|
colorTextBase: "#101010",
|
||||||
|
},
|
||||||
|
algorithm: theme.defaultAlgorithm,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{node}
|
||||||
|
</ConfigProvider>
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
token: {
|
||||||
|
colorPrimary: "#f14668",
|
||||||
|
colorSuccess: "#2be396",
|
||||||
|
colorWarning: "#face14",
|
||||||
|
colorInfo: "#15c6e3",
|
||||||
|
colorTextBase: "#fff",
|
||||||
|
},
|
||||||
|
algorithm: theme.darkAlgorithm,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{node}
|
||||||
|
</ConfigProvider>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
|
export default defineNitroPlugin((nitro) => {
|
||||||
|
nitro.hooks.hook("render:html", (html) => {
|
||||||
|
html.head.push(`<style>${css}</style>`);
|
||||||
|
});
|
||||||
|
});
|
Loading…
x
Reference in New Issue
Block a user