color de tema dinámico umi antd (2)

Este artículo se basa principalmente en la optimización y actualización del color del tema dinámico umi antd.

El efecto es el siguiente:

Código fuente de GitHub: rama maestra umi-antd-dynamic-theme

En el artículo anterior, hubo algunos problemas con Colores de tema dinámicos, reflejados principalmente en:

Para el archivo de estilo xxx.less, es necesario dividir el archivo de estilo de color del tema xxx.theme.less. dividirlo, en realidad es posible, sí, pero causará el problema de que se compilarán todos los archivos de estilo, excepto el color del tema. Esto tendrá un cierto impacto en el rendimiento, pero en realidad no es necesario.

Para la configuración manual de public/styles/components.less y config/path.config.ts, esto se puede hacer automáticamente a través de scripts, no es necesario que todos configuren manualmente, aquí es donde se puede optimizar hecho, pero, donde puede continuar optimizando es simplemente no usar estos dos archivos

Después de la compilación, se generarán varios archivos menos, como se muestra en la siguiente figura:

Para resuelva este problema, la idea Todos los archivos less generados se empaquetan en un archivo less personalizado, así que escriba el siguiente script para escanear todos los archivos xxx.theme.less en el proyecto.

Cree un nuevo archivo scripts/theme/themeScripts.js. El script es el siguiente:

Este script en realidad resuelve los problemas uno, dos y tres, y explica el script de la siguiente manera:

Las variables personalizadas y las variables de color del tema se definen en el archivo config/theme.js. Al mismo tiempo, a través del script anterior, todas las variables definidas en config/theme.js se han leído y escrito en el encabezado del archivo custom.theme.less, por lo que el archivo xxx.theme.less de la página no necesita para introducir las variables de color del tema correspondiente.

La pregunta 4 es un problema que ocurre en proyectos reales y es un problema ocasional. A veces el color del tema cambia con éxito y luego falla, especialmente cuando la velocidad de la red es lenta, este es un problema muy fatal. Algunas personas tendrán este problema, otras no.

Al observar el código fuente de less.js, descubrimos que less.js llamará al método less.refresh para actualizar la página una vez completada la carga, pero este método no pasa variables relacionadas con modificarVars. , de la siguiente manera:

En nuestro activador personalizado less.js, se requiere que el método modificarVars contenga una variable. El método modificarVars necesita variables relacionadas con el color del tema. El código fuente es el siguiente:

La página activa less.modifyVars, y less.pageLoadFinished se activa aleatoriamente, no en orden, lo que lleva a lo anterior. mencionó problemas ocasionales, la solución es comentar less.pageLoadFinished.

-10: Tenga en cuenta que el archivo personalizado xxx.theme.less está escrito en css en lugar de @prefix, porque @prefix a veces falla. El estilo normal es el siguiente:

Pasa. Para esta configuración, los desarrolladores solo necesitan escribir xxx.theme.less y ya no necesitan escribir otros archivos de configuración.