Less.js: v3.0.1で壊れたリモートURLのインポート

作成日 2018年03月20日 · 6コメント · ソース: less/less.js

より少ないv2.7.3（webpackv3.1.0およびless-loaderv4.1.0を使用）では、次のようなリモートフォントをmain.lessファイルにインポートできます。

@import url('https://fonts.googleapis.com/css?family=Nunito');

同じ構成と依存関係を使用するv3.0.1が少ないと、ビルドしようとしたときにのみこのエラーが発生するようになりました。

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)

question

ソース

rejas

最も参考になるコメント

これは、URLのどこかに「css」文字列が見つかったという理由だけで、Lessが「css」インポート（ @importステートメントを保持）に自動切り替えしなくなったという事実に関連していると思います。

@import (css) url('https://fonts.googleapis.com/css?family=Nunito');試しください

matthew-dean 2018年03月20日

👍44 🎉8 🚀5 ❤5

全てのコメント6件

@import (css) url('https://fonts.googleapis.com/css?family=Nunito');試しください

matthew-dean 2018年03月20日

👍44 🎉8 🚀5 ❤5

本当に助けてくれた素晴らしい@ matthew-dean。ありがとう！

rejas 2018年03月20日

@ matthew-deanインポートからURLを解決するときに、デフォルトでhttpsを使用するようにコンパイラーに指示する方法はありますか？たとえば、 @import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);を使用すると、出力は次のようになります。
@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'); }
これをHTTPS経由で読み込まれるページに配置すると、「混合コンテンツ」エラーが発生し、httpリクエストがブラウザによってブロックされます。だから今私は(css)またはhttps://...を使用するようにすべてのインポートを更新する必要があるので、代わりにconfigオプションでこれを行うことができるかどうか疑問に思っていますか？

dmitriy-drenkalyuk 2019年10月30日

代わりにconfigオプションを使用してこれを実行できるかどうか疑問に思っていますか？

いいえ。コンパイルされたCSSにfonts.googleapis.comをインポートするという考え自体は危険です。これは、 fonts.googleapis.comが使用されているブラウザをスニッフィングするためです（明らかに、 node LessはChrome / Chromiumとして報告されます））そしてそれに応じて異なる結果を返す可能性があります（これまでのところ、この点で問題は聞いていませんが、いつでも自由に中断できます）。

seven-phases-max 2019年10月30日

👍1

@ dmitriy-drenkalyukなぜ書くだけではないのですか？

<strong i="6">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

？

matthew-dean 2019年10月30日

@ matthew-deanこれは私が最終的に行ったことであり、configを介してそれを行うオプションを探していたので、そのようなインポートを使用するすべての場所を検索して更新する必要はありません。

dmitriy-drenkalyuk 2019年11月22日

このページは役に立ちましたか？

0 / 5 - 0 評価

Less.js: v3.0.1で壊れたリモートURLのインポート

最も参考になるコメント

全てのコメント6件

関連する問題