Less.js: Importación de URL remotas rotas con v3.0.1
Con menos v2.7.3 (usando webpack v3.1.0 y less-loader v4.1.0) podría importar fuentes remotas como esta en mi archivo main.less:
<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Nunito');
Con menos v3.0.1 usando la misma configuración y dependencias, ahora solo obtengo este error al intentar compilar:
Message:
./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/less-loader/dist/cjs.js??ref--1-4!./src/css/main.less
Module build failed:
*/
<strong i="10">@import</strong> url('https://fonts.googleapis.com/css?family=Nunito');
^
Can't resolve './https://fonts.googleapis.com/css?family=Nunito' in 'C:\Projekte\mine\homepage\src\css'
in C:\Projekte\mine\homepage\src\css\main.less (line 6, column 0)
rejas
Todos 6 comentarios
Creo que esto podría estar relacionado con el hecho de que Less ya no cambia automáticamente a una importación "css" (conservando la instrucción @import ) solo porque encuentra una cadena "css" en algún lugar de la URL.
Prueba <strong i="7">@import</strong> (css) url('https://fonts.googleapis.com/css?family=Nunito');
matthew-dean
en 20 mar. 2018
Increíble @ matthew-dean que realmente ayudó. ¡Muchas gracias!
rejas
en 20 mar. 2018
@ matthew-dean ¿Hay alguna manera de decirle al compilador que use https de forma predeterminada cuando resuelva las URL de las importaciones? por ejemplo, cuando uso <strong i="5">@import</strong> url(//fonts.googleapis.com/css?family=Open+Sans:400,700); , la salida es
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(http://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
Cuando coloco esto en una página que se carga a través de HTTPS, obtengo un error de 'contenido mixto' y las solicitudes http son bloqueadas por el navegador. Entonces, ahora tengo que actualizar todas las importaciones para usar (css) o https://... , así que me pregunto si podría hacer esto con una opción de configuración en su lugar.
dmitriy-drenkalyuk
en 30 oct. 2019
así que me pregunto si podría hacer esto con una opción de configuración en su lugar.
No. Más sobre la mera idea de importar fonts.googleapis.com en un CSS compilado es peligrosa porque fonts.googleapis.com huele el navegador usado (obviamente Less en node se reportará como Chrome / Chromium ) y puede devolver resultados diferentes dependiendo de eso (hasta ahora no he oído hablar de ningún problema al respecto, pero se puede romper en cualquier momento).
seven-phases-max
en 30 oct. 2019
@ dmitriy-drenkalyuk ¿Por qué no escribir simplemente:
<strong i="6">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
?
matthew-dean
en 30 oct. 2019
@ matthew-dean Esto es lo que hice finalmente, solo estaba buscando una opción para hacerlo a través de la configuración, de modo que no necesitemos buscar y actualizar todos los lugares donde usamos tales importaciones.
dmitriy-drenkalyuk
en 22 nov. 2019
Temas relacionados
briandipalma
·
6Comentarios
papandreou
·
7Comentarios
xblakestone
·
3Comentarios
MarkSG93
·
4Comentarios
dotnetwise
·
5Comentarios
Comentario más útil
Creo que esto podría estar relacionado con el hecho de que Less ya no cambia automáticamente a una importación "css" (conservando la instrucción
@import) solo porque encuentra una cadena "css" en algún lugar de la URL.Prueba
<strong i="7">@import</strong> (css) url('https://fonts.googleapis.com/css?family=Nunito');