• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

210
Views
¿Es posible importar estilos CSS desde módulos de Javascript?

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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. });
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error