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…
Reference in New Issue
Block a user