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