impor file .css ke file .less

Bisakah Anda mengimpor file .css ke file .less ...?

Saya cukup akrab dengan lebih sedikit dan menggunakannya untuk semua perkembangan saya. Saya secara teratur menggunakan struktur sebagai berikut:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Semua impor adalah file .less lainnya dan semua berfungsi sebagaimana mestinya.

Masalah saya saat ini adalah ini: Saya ingin mengimpor file .css ke .less yang merujuk gaya yang digunakan dalam file .css sebagai berikut:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

File .css berisi kelas bernama .typetetapi ketika saya mencoba untuk mengkompilasi file .less saya mendapatkan kesalahanNameError: .type is undefined

Apakah file .less tidak mengimpor file .css, hanya file .less lainnya ...? Atau apakah saya salah merujuk ...?!

Anda dapat memaksa file untuk ditafsirkan sebagai tipe tertentu dengan menentukan opsi, misalnya:

@import (css) "lib";

akan menampilkan

@import "lib";

dan

@import (less) "lib.css";

akan mengimpor lib.cssfile dan memperlakukannya kurang. Jika Anda menentukan file kurang dan tidak menyertakan ekstensi, tidak ada yang akan ditambahkan.

Jika Anda ingin CSS Anda disalin ke dalam output tanpa diproses, Anda dapat menggunakan (inline)arahan . misalnya,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Saya harus menggunakan yang berikut ini dengan versi 1.7.4

@import (less) "foo.css"

Saya tahu jawaban yang diterima adalah @import (css) "foo.css"tetapi tidak berhasil. Jika Anda ingin menggunakan kembali kelas css Anda dalam file yang lebih sedikit, Anda perlu menggunakannya (less)dan tidak (css).

Periksa dokumentasinya .

Ubah ekstensi file file css Anda menjadi .less. Anda tidak perlu menulis KURANG di dalamnya; semua CSS valid KURANG (kecuali hal-hal MS yang harus Anda hindari, tapi itu masalah lain.)

Per jawaban Fractalf, ini diperbaiki di v1.4.0

Dari situs web KURANG :

Jika Anda ingin mengimpor file CSS, dan tidak ingin KURANG memprosesnya, cukup gunakan ekstensi .css:

@import "lib.css"; Arahan hanya akan dibiarkan apa adanya, dan berakhir pada output CSS.

Seperti yang ditunjukkan jitbit dalam komentar di bawah ini, ini benar-benar hanya berguna untuk tujuan pengembangan, karena Anda tidak ingin @importmengkonsumsi bandwidth berharga yang tidak perlu .

Coba ini :

@import "lib.css";

Dari Dokumentasi Resmi:

Anda dapat mengimpor file css dan lebih sedikit. Hanya sedikit file yang diimpor pernyataan diproses, pernyataan impor file css disimpan sebagaimana adanya. Jika Anda ingin mengimpor file CSS, dan tidak ingin KURANG memprosesnya, cukup gunakan ekstensi .css:

Sumber: http://lesscss.org/

Jika Anda hanya ingin mengimpor File-CSS sebagai Referensi (misalnya untuk menggunakan kelas dalam Mixins) tetapi tidak menyertakan seluruh file CSS dalam hasil yang dapat Anda gunakan @import (less,reference) "reference.css";:

tanpa saya

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* Hasil (my.css) dengan lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

saya menggunakan lessc 2.5.3

Jika Anda ingin mengimpor file css yang harus di tapak karena kurang gunakan baris ini:

.ie {
  @import (less) 'ie.css';
}

karena 1.5.0 u dapat menggunakan kata kunci 'sebaris'.

Contoh: @import (sebaris) "not-less-compatible.css";

Anda akan menggunakan ini ketika file CSS mungkin kurang kompatibel; ini karena walaupun Kurang mendukung standar CSS yang paling dikenal, itu tidak mendukung komentar di beberapa tempat dan tidak mendukung semua peretasan CSS yang dikenal tanpa memodifikasi CSS. Jadi Anda bisa menggunakan ini untuk memasukkan file dalam output sehingga semua CSS akan berada dalam satu file.

(sumber: http://lesscss.org/features/#import-directives-feature )