Estoy tratando de cargar dinámicamente la etiqueta de enlace dentro de un componente React con shadow dom, pero no puedo encontrar una solución para acceder al nombre de archivo/ruta con hashes generados por MiniCssExtractPlugin/Webpack.
La idea general es tener más de dos salidas CSS. Primero global y los otros para aislamiento "shadow dom".
Ya intenté configurar la variable env con el nombre de archivo, pero parece ser una acción asíncrona. Mi entorno REACT_APP_CSS no está definido.
// as example new MiniCssExtractPlugin({ filename: ({ chunk }) => { // REACT_APP_CSS it is some global variable REACT_APP_CSS = `${chunk.name}.${chunk.hash}.css`; return `${assetName}.css`; } }), new webpack.DefinePlugin({ "process.env": JSON.stringify({ REACT_APP_CSS: REACT_APP_CSS }) }),¿Sabe qué puedo hacer para acceder a los nombres de archivo/rutas en tiempo de ejecución? Cualquier solución síncrona sería genial.
Componente de ejemplo
import root from "react-shadow"; [..] return ( <root.span> <link href={myCssPathToBuild} rel="stylesheet" /> [..] </root.span> )Espero que puedas ayudar.
Encontré una solución. No es perfecto, pero "funciona".
Para acceder a las rutas de fragmentos, puede:
Utilice assets-webpack-plugin
new AssetsPlugin({ filename: "assets.js", processOutput: function (assets) { return "window.staticMap = " + JSON.stringify(assets); } }),Crea un mapa/objeto que contiene un par de chunkName y ruta. Usando AssetPlugin puede especificar la salida y el nombre del archivo con ext. En el ejemplo dado, creo un archivo js que establece una variable global que contiene un mapa de activos.
Para acceder a window.staticMap en tiempo de ejecución, <script src="/assets.js"> en HTML público.
En mi humilde opinión, el acceso a las rutas de fragmentos debería ser mucho más fácil. Si tiene otra/mejor solución, por favor comparta.