En React, tengo la mayor parte de mi CSS vinculado a mis módulos de la siguiente manera. Module1.jsx tiene Module1.css, y así sucesivamente.

Webpack compila todos estos módulos en una sola solicitud a través de bundle.js.

Sin embargo, tengo alrededor de 40 líneas de CSS que uso en toda la aplicación que no pertenecen a un solo módulo. De hecho, algunos de ellos apuntan a elementos fuera de la aplicación, es decir, la etiqueta del cuerpo.

Actualmente lo tengo codificado en el archivo index.html que sirve express. Podría ponerlo en otro archivo y vincularlo, pero el suyo requeriría otra solicitud de red.

Me gustaría tenerlo en su propio archivo, pero luego inyectarlo en el archivo index.html antes de que se sirva.

No estoy seguro de si el paquete web puede hacer esto, o se puede hacer a través de express. Pero la sintaxis podría verse así:

En lugar de esto:

 <link rel="stylesheet" href="styles.css">

Tal vez ssi para server-side-indlcude y el archivo para incluir en esa ubicación:

 <ssi file="styles.css">

Simplemente parece ineficiente enviar el index.html al cliente y que el cliente solicite el CSS, cuando solo se puede enviar en la solicitud inicial.

En general, las razones de esto son:

• para limpiar index.html y hacerlo más legible para los humanos

• seguir una separación de preocupaciones arquitectura de diseño

Ideas sobre cómo hacer esto:

• usando plantillas (¿es esto una exageración?)

• ¿Hay alguna manera de implementar el lado del servidor incluye?

• ¿El paquete web tiene una forma de insertar archivos en un archivo?

• puede expresar paquetes de archivos estáticos?