Quiero importar Google Fonts y agregar estilos personalizados a un proyecto existente. Sin embargo, solo tengo acceso a ciertos módulos JS. Sin acceso a archivos HTML o CSS existentes.
La única forma en que puedo agregar estilos es usando un módulo JS que se ve así:
// styles.js const styles = () => ` .custom-class { font-size: 14px; } `; module.exports = styles; Intenté agregar Importación de fuentes de Google o una declaración de Importación de CSS simple entre las styles.js backticks sin éxito, ninguno funciona. (Incluí todos mis intentos en un código a continuación, pero cuando estaba probando, solo usé 1 declaración de línea/importación a la vez).
// styles.js import "./custom.css"; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); const styles = () => ` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); .custom-class { font-size: 14px; } `; module.exports = styles;¿Es posible de alguna manera importar archivos CSS en un módulo JS de manera que pueda usar las líneas CSS importadas en mis anulaciones/nuevos estilos?
Puede fetch el script externo utilizando la API de obtención de JavaScript. Aquí está el código posible para lo que quiere lograr.
// styles.js async function getCSS(url) { let response = await fetch(url); return await response.text(); } let myCSS = await getCSS('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); const styles = () => ` ${myCSS} .custom-class { font-size: 14px; } `; module.exports = styles;Tenga en cuenta que no he realizado ningún manejo de errores en el código anterior. Dado que es una buena práctica manejar los errores, le pediría que haga el manejo de errores necesario. :)
Ediciones:
El uso promete el código anterior:
// styles.js function getCSS(url) { return fetch(url).then(response => response.text()); } const styles = new Promise((resolve, reject) => { resolve(getCSS('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap')); }); module.exports = styles;Desde otro archivo llámalo así
// otherFile.js require('styles.js').then(result => { // do whatever you want with the // result. you can even add custom css here. });