@marceloverdijk saya ingin tahu di sini apa pendapat Anda tentang # 331 dan bagaimana jalur harus disesuaikan saat mengimpor lembar gaya.

Aturannya sederhana: hanya impor file yang diakhiri dengan .less atau tidak berekstensi, sisanya diserahkan ke browser. Jadi <strong i="6">@import</strong> "foo.css" tidak tersentuh, <strong i="8">@import</strong> "foo" dan <strong i="10">@import</strong> "foo.less" diurai dan file diimpor.

Oke, aturannya jelas. Terima kasih.

Tetapi apakah Anda tahu mengapa impor Google Font sebenarnya diimpor?
Satu-satunya perbedaan adalah saya menggunakan Env.js dan Rhino alih-alih peramban asli.

Apakah logika kurang mungkin menggunakan sesuatu untuk menentukan apakah itu harus diimpor atau tidak yang tidak dipahami (atau salah) oleh Env.js?

Setiap bantuan dihargai.

Perhatikan bahwa saya menggunakan ini untuk mengkompilasi LESS:

hasil var; var p = new less.Parser (); p.parse (masukan, fungsi (e, pohon) {result = tree.toCSS ();});

1 pertanyaan tentang aturan tersebut. Apakah kutipan penting?

Saya melihat ini di sumber import.js yang lebih sedikit:

    if (path instanceof tree.Quoted) {
        this.path = /\.(le?|c)ss$/.test(path.content) ? path.content : path.content + '.less';
    } else {
        this.path = path.value.content || path.value;
    }

Solusi yang saya gunakan adalah menambahkan &.css ke URL font untuk mengelabui pengurai LESS agar menanganinya seperti impor CSS biasa. Seperti:

<strong i="7">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans&.css);

BTW, saya merasa sangat disayangkan bahwa desainer asli LESS tidak menggunakan petunjuk @include , alih-alih menggunakan kembali @import ...

Saya pikir itu harus bekerja tanpa itu seperti yang disarankan oleh pengujian https://github.com/cloudhead/less.js/blob/master/test/less/import.less

yang mengandung

<strong i="8">@import</strong> url("import/import-test-a.less");
//<strong i="9">@import</strong> url("import/import-test-a.less");
<strong i="10">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

#import-test {
  .mixin;
  width: 10px;
  height: <strong i="11">@a</strong> + 10%;
}

dan mengharapkan

<strong i="15">@import</strong> "import-test-d.css";

<strong i="16">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);
#import {
  color: red;
}
.mixin {
  height: 10px;
  color: red;
}
#import-test {
  height: 10px;
  color: red;
  width: 10px;
  height: 30%;
}

yang berisi impor Google Fonts.
Saya belum menguji ini sendiri tetapi menganggapnya berhasil.

NB: Impor Google Fonts ini adalah satu-satunya bagian yang tidak lolos di pustaka lesscss4j open source saya.
Semua pengujian kompatibilitas lainnya sedang lulus sekarang.

Jadi saya sangat ingin menyelesaikan masalah terakhir ini sebelum merilisnya. Semoga ada yang bisa membantu.

Terima kasih maranomynet atas solusi hebat untuk Google Web Fonts di LESS (Saya mengalami masalah saat menggunakan @import di LESS rilis 1.1.3). Saya setuju bahwa LESS menangani bagian sintaks ini dengan cara yang tidak menguntungkan.

Saya bahkan semakin bingung sekarang.

Saya membuat proyek web sederhana dan menambahkan kode di bawah ini ke bagian head:

<link rel="stylesheet/less" type="text/css" href="/less/google.less">
<link rel="stylesheet/less" type="text/css" href="/bootstrap/bootstrap.less">
<script src="/js/less-1.1.4.js" type="text/javascript"></script>

Kompilasi Twitter Bootstrap berfungsi tetapi google.less tidak.
Google.less ini hanya berisi baris di bawah ini yang disalin dari import.less uji kompatibilitas LESS

<strong i="11">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

Kesalahan yang saya terima di browser adalah:

Tidak dapat memuat http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

Sekarang saya benar-benar mulai bertanya-tanya tentang uji kompatibilitas import.less ....

tambahkan & .css sebelum tutup impor url

dari
@import url (http://fonts.googleapis.com/css?family=Open+Sans);

untuk
@import url (http://fonts.googleapis.com/css?family=Open+Sans&css);

Saya memiliki masalah serupa, jadi jika ini membantu siapa pun: Saya mencoba mengimpor beberapa font Google yang dipisahkan oleh '|':
@import url (http://fonts.googleapis.com/css?family=Inconsolatai>Cantarelli>Architectsi>Daughter&.css);
yang akan memberikan kesalahan "menutup tidak ada) untuk url ()"

Kesalahan diselesaikan dengan membungkus URL dalam tanda kutip (catatan: & .css masih harus di akhir, jika tidak terjadi kesalahan impor 404). Semua font juga berhasil dimuat:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Monoi>Cantarelli>Architectsi>Daughter&.css");

tips bagus enoex: D terima !!!!

Err, sulit untuk melihat mengapa masalah ini telah ditutup. Pengguna telah menemukan peretasan yang sangat cerdik di sekitarnya, yang dapat rusak jika Google memutuskan untuk melampirkan arti ke & .css; ini perlu diperbaiki di lessc. Beberapa metode harus ada untuk memaksa @import diartikan secara harfiah.

Saya setuju. ada saran?

<strong i="6">@import</strong> css url(...);

adalah sebuah kemungkinan. Ini juga akan memungkinkan Anda untuk memaksa Lebih sedikit mengimpor dengan ekstensi .css.

Sintaks itu terlihat bagus (saya bukan orang yang menulis parser, jadi saya tidak tahu seberapa cocok itu).

Perhatian saya hanya kompiler less . Kode yang bermasalah dengan saya berfungsi dengan baik untuk pengembang yang menulisnya, mungkin karena kompiler mereka yang lebih sedikit bahkan tidak melakukan waktu kompilasi @import . Jadi meskipun ini telah diperbaiki di lessc , saya mungkin akan tetap menggunakan peretasan "& .css". Tidak ada yang dapat Anda lakukan tentang itu.

Ada yang menemukan perbaikan?

Saya menemukan bahwa menambahkan "& .css" dan membungkus URL dalam tanda kutip hanya menyelesaikan masalah kompilasi - font yang saya tentukan masih belum dirender ....

dibuka kembali karena kedengarannya masih menjadi masalah - bukan?

perbaikan sederhana adalah dengan tidak menambahkan apapun ke url jika itu berisi params (misalnya? family = x)

@ Ntoft Saya tidak dapat mereproduksi kesalahan lagi .. menggunakan lessc .. apa sebenarnya masalah yang tersisa?

Terima kasih telah menindaklanjuti.

Saya menggunakan pendekatan "append & .css" dan sekarang berfungsi (sebagian kesalahan pengguna: - /) Hanya ingin tahu apakah ada metode yang lebih baik. Namun, tampaknya berfungsi jadi silakan menutupnya.

Terima kasih.

alangkah baiknya jika ini bekerja tanpa pendekatan append .css .. jadi apakah Anda punya contoh tentang itu?

Pikir saya salah paham ... masalahnya adalah css sedang diimpor saat Anda tidak ingin mengimpornya.

Mungkin di 1.4.0 @import harus dibiarkan saja dan @include harus selalu disertakan

memindahkan diskusi ke satu masalah # 1185

Hanya perlu untuk keluar dari karakter seperti ini, @import url (https \: \ / \ / fonts.googleapis.com \ / css? Family = Orbitron & .css);

@ jas-naz Cara yang tepat dan lebih mudah dibaca adalah:

<strong i="6">@import</strong> (css) url(https://fonts.googleapis.com/css?family=Orbitron);

Untuk selengkapnya, lihat http://lesscss.org/features/#import -atrules-feature-import-options.

Halo, peretasan lain untuk melakukannya adalah dengan menambahkan "#css" di akhir url, seperti ini:

<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Paytone+One#css');

@Tyri_tanjung

Ide buruk. Dalam versi terbaru Less akan benar-benar memproses file ini (alih-alih membiarkan impor apa adanya).
Itu sebabnya (css) di depannya adalah wajib. (Di versi sebelumnya, ini hanya perilaku yang salah di mana kompilator memutuskan dengan string "beberapa" css di url alih-alih ekstensi yang tepat yang hilang dalam kasus khusus ini).