Estaba usando webpack 5 para agrupar mis estilos css, quería incluir cada módulo tal cual. sin compilarlo en un solo archivo, pero noté que los estilos que tenían menos de 1 kb o incluso de 5 kb a 10 kb están todos por encima de 30 kb cuando uso el cargador de estilos.

Supongo que se debe al código del cargador de estilo para inyectar el css en el cuerpo. Intenté usar el extracto mini css pero agregar el css como etiquetas de enlace no funcionaba para SPFX. así que terminé empaquetándolo con el cargador de archivos, por lo que es una cadena y usé un script personalizado para inyectar los estilos.

 export const attrReducer = (acc, cv) => cv[1] !== null || typeof cv[1] !== 'undefined' ? acc.concat(`${cv[0]}="${cv[1]}" `) : acc export const mapToAttr = (o) => Object.entries(o).reduce(attrReducer, ``) export const makeStyleTagLinkString = (props) => `<link ${mapToAttr(props)}></link>` export const makeStyleTagString = ({ content, ...props }) => `<style ${mapToAttr(props)}>${content}</style>` export const injectStyleTag = (props) => (url) => ( !document.querySelector(`style[data-href="${url}"]`) ? document.head.insertAdjacentHTML('beforeend', makeStyleTagString({ props, href: url })) : null ); export const injectStyleLinkTag = (props) => (url) => (content) => ( !document.querySelector(`style[data-href="${url}"]`) ? document.head.insertAdjacentHTML('beforeend', makeStyleTagLinkString({ ...props, content: content })) : null );

Lo anterior funciona bien para mi configuración, pero esto realmente no es lo que quería terminar usando, ya que se suponía que webpack manejaría eso por mí.

Otro problema es que style-loader me estaba funcionando bien, además del problema de aumentar el tamaño de cada módulo css, era manipular la etiqueta de estilo en el momento de la compilación según el contenido de los estilos, esto me resultó útil porque puedo aplique el polyfill de consulta de contenedor (o cualquier otro) según el contenido del css. ex:

 { loader: "style-loader", options: { styleTagTransform: function (css, style) { css.indexOf('@container') > -1 ? style.setAttribute('cqfill', '') : null; style.innerHTML = css; document.head.appendChild(style); }, }, },

SPFX tiene su propia implementación para cargar estilos que probé pero no funcionó bien con container-query-polyfill. Tampoco hay opciones para agregar nada a la etiqueta de estilo o manipularlo de todos modos.

 export default class JQueryAccordionWebPart extends BaseClientSideWebPart<IJQueryAccordionWebPartProps> { protected onInit(): Promise<void> { SPComponentLoader.loadCss('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css'); return super.onInit(); } // ... }

Entonces, la pregunta es si hay otras formas de exportar el archivo css como un activo y usar el cargador de estilo como una librería separada para crear el estilo o la etiqueta de enlace. O cualquier otra biblioteca que pueda incluir que haga esto sin tener que usar un código personalizado.