Less.js: Importação de urls remotos quebrados com v3.0.1
Com menos v2.7.3 (usando webpack v3.1.0 e less-loader v4.1.0) eu poderia importar fontes remotas como esta no meu arquivo main.less:
<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Nunito');
Com menos v3.0.1 usando a mesma configuração e dependências, agora só recebo este erro ao tentar construir:
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 comentários
Acho que isso pode estar relacionado ao fato de que Less não muda mais automaticamente para uma importação "css" (preservando a instrução @import ) apenas porque encontra uma string "css" em algum lugar da URL.
Experimente <strong i="7">@import</strong> (css) url('https://fonts.googleapis.com/css?family=Nunito');
matthew-dean
em 20 mar. 2018
Impressionante @matthew-dean que realmente ajudou. Muito obrigado!
rejas
em 20 mar. 2018
@ matthew-dean Existe uma maneira de dizer ao compilador para usar https por padrão ao resolver urls de importações? por exemplo, quando eu uso <strong i="5">@import</strong> url(//fonts.googleapis.com/css?family=Open+Sans:400,700); , a saída é
@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');
}
Quando coloco isso em uma página que é carregada via HTTPS, recebo um erro de 'conteúdo misto' e as solicitações de http são bloqueadas pelo navegador. Então agora eu tenho que atualizar todas as importações para usar (css) ou https://... , então só estou me perguntando se eu poderia fazer isso com uma opção de configuração em vez disso?
dmitriy-drenkalyuk
em 30 out. 2019
então, estou me perguntando se eu poderia fazer isso com uma opção de configuração?
Não. Mais sobre a própria ideia de importar fonts.googleapis.com em um CSS compilado é perigoso porque fonts.googleapis.com detecta o navegador usado (obvoiusly Less em node irá se reportar como Chrome / Chromium ) e pode retornar resultados diferentes dependendo disso (até agora não ouvi nenhum problema a esse respeito, mas pode ser interrompido a qualquer momento).
seven-phases-max
em 30 out. 2019
@ dmitriy-drenkalyuk Por que não basta escrever:
<strong i="6">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
?
matthew-dean
em 30 out. 2019
@matthew-dean Isso é o que eu fiz eventualmente, estava apenas procurando uma opção de fazer via config, para que não precisássemos buscar e atualizar todos os locais onde usamos tais importações.
dmitriy-drenkalyuk
em 22 nov. 2019
Questões relacionadas
matthew-dean
·
6Comentários
Oskariok
·
6Comentários
renoth
·
6Comentários
heavyk
·
3Comentários
bassjobsen
·
6Comentários
Comentários muito úteis
Acho que isso pode estar relacionado ao fato de que Less não muda mais automaticamente para uma importação "css" (preservando a instrução
@import) apenas porque encontra uma string "css" em algum lugar da URL.Experimente
<strong i="7">@import</strong> (css) url('https://fonts.googleapis.com/css?family=Nunito');