impor file .css ke file .less


228

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 ...?!


5
KURANG jatuh kembali ke CSS, jadi Anda harus dapat hanya mengubah nama style.css ke style.less, lalu mengimpornya seperti biasa ... kecuali tentu saja mengubah nama style.css bukan pilihan
jackwanders

3
ya, sayangnya mengubah nama file .css tidak benar-benar mungkin.
Tn. Jonny Wood

1
Memiliki masalah yang sama. Tolong dukung masalah ini github.com/cloudhead/less.js/issues/303
Yaroslav

5
jika Anda tidak perlu merujuk .css secara eksternal, dan pada saat yang sama Anda tidak boleh memodifikasi (mengganti nama) file .css, Anda bisa membuat tautan simbolis ke file yang memiliki .lessekstensi .cs. Kemudian rujuk sebagai .lessfile. Menjadi tautan simbolis, itu mengangkat beban untuk menyinkronkan mereka sebagai perubahan .css Anda segera mempengaruhi file .less yang sedang diimpor. Kekurangannya adalah Anda harus mengkompilasi ulang css terakhir setelah perubahan berikutnya. Untuk info tentang cara membuat tautan simbolis di Windows, ketikkan MKLINK /?jendela perintah
Ivaylo Slavov

@jackwanders, penggantian nama tidak perlu, karena KURANG kembali ke CSS (seperti yang Anda tunjukkan dengan benar). Anda dapat mengimpor .cssfile dengan menggunakan inline (less)direktif dan mengambil keuntungan dari fakta bahwa .csssintaks adalah valid .lesssintaks
ira

Jawaban:


316

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.


1
Ini jawaban yang benar. Yang ketiga akan mengimpor + kompilasi kode CSS sebagai kode lebih sedikit dan tidak akan membiarkan arahan tetap utuh.
CMCDragonkai

1
Saya pikir @import (termasuk) "lib.css" harus digunakan. Saya tidak suka semantik berbohong ke kompiler. Tentu saja ketika Anda tahu tidak ada kode KURANG dalam file.

16
Ini akan membuat permintaan http tambahan untuk foo.css, sehingga (inline)arahannya (lihat stackoverflow.com/a/22594082/160968 ) sekarang lebih disukai
Urs

1
(inline)tidak akan berfungsi karena tidak mengubah referensi eksternal ke font atau @importfile css ed lainnya . Anda baru saja berakhir dengan file css yang lebih besar yang menyebabkan banyak permintaan HTTP 404 ....
user3338098

Memutar kembali hasil pengeditan terakhir karena itu hanya salah dan tidak menjawab Q.
seven-phases-max

246

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

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

7
Sempurna. Ini bekerja dengan baik ketika Anda ingin menggabungkan beberapa file CSS (misalnya dalam ie7.less), tetapi tidak perlu memprosesnya (misalnya bootstrap-ie7 menggunakan ekspresi, yang KURANG tidak menangani dengan baik).
Joe

4
Sangat membantu. @import (css) "styles.css";tidak bekerja untuk saya.
ivkremer

10
Keduanya menangani kasus penggunaan yang berbeda. Dengan (css), @importarahan akan tetap apa adanya, dan sebagai hasilnya file CSS akan dimuat oleh browser saat runtime; dengan (inline), isi file CSS sebenarnya diimpor ke dalam stylesheet yang dikompilasi, yang adalah apa yang Anda inginkan jika file itu keluar dari root web Anda misalnya. Perhatikan bahwa perilaku default ketika @importing .cssfile yang sama dengan (css)bendera - membaca dokumentasi untuk info lebih lanjut :)
neemzy

jadi ini jelas tidak akan berfungsi jika file css Anda memiliki @importarahan karena itu akan membutuhkan "pemrosesan".
user3338098

Apakah 'sebaris' berarti bahwa semua impor itu juga akan dimasukkan? Apakah ada cara untuk secara inline secara rekursif?
Lampu jalan

29

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 .


2
Jawaban yang diterima awalnya memiliki opsi yang benar (ya, (less)adalah satu - satunya pilihan jika Anda ingin menggunakan kembali beberapa gaya file css) tetapi karena alasan tertentu @Fractalf menghapus bagian yang benar dengan pengeditan terbarunya.
tujuh-fase-maks

1
Anda dapat menggabungkan "referensi" dan "kurang":@import (less, reference) "foo.css"
Skarllot

28

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


4
Secara teknis, itu tidak mengimpor file CSS.
nilskp

@nilskp Anda benar; tetapi jika Anda ingin menggunakan kelas-kelas di file lain, Anda memerlukan file KURANG, bukan CSS.
Mathletics

1
@nilskp, apakah Anda mengatakan bahwa mengubah ekstensi terlalu banyak untuk ditanyakan agar file diuraikan sebagai KURANG?
Mathletics

23
Ya, tentu saja begitu. Cobalah untuk memikirkan di luar beberapa proyek rumah kecil di mana Anda memiliki semua file. Pikirkan proyek multi-orang yang lebih besar, di mana tidak semua orang menggunakan KURANG. Ada banyak kasus penggunaan di mana mengubah nama file tidak bisa dilakukan.
nilskp

1
Anda harus peduli jika css Anda mengandung sesuatu seperti: calc (100% - 45px); dan Anda ingin itu di browser. Jika kurang memproses file sebagai kurang, hasil akhir akan menjadi: calc (55%); karena lebih sedikit kalk.
Christof Aenderl

8

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 .


14
Ini tidak akan MENGIMPOR file, itu akan membiarkan arahan @import tetap utuh. Itu masih akan berfungsi, tetapi Anda harus menghindari css-import - lihat ini developers.google.com/speed/docs/best-practices/…
Alex

5
Terima kasih atas info @bitbit. Secara pribadi, saya merasa lebih mudah untuk digunakan @importselama pengembangan, kemudian menggabungkan dan memperkecil file yang diimpor ke dalam satu lembar gaya ketika pindah ke produksi.
webdevkit

1
Jika Anda membaca pertanyaan dengan seksama (dan bukan hanya baris tajuk), Anda akan melihat bahwa OP ingin mereferensikan kelas dalam file css sebagai mixin, yang tidak mungkin jika hanya diurai sebagai impor css sederhana.
awe

7

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/


2
Jika Anda membaca pertanyaan dengan seksama (dan bukan hanya baris tajuk), Anda akan melihat bahwa OP ingin mereferensikan kelas dalam file css sebagai mixin, yang tidak mungkin jika hanya diurai sebagai impor css sederhana.
awe

6

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


Inilah yang saya butuhkan. Namun, saya harus menggunakan memperpanjang sintaks: &:extend(.reference-class all);. Referensi langsung kelas menghasilkan kesalahan kompilasi.
Jens Neubauer

4

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

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

3

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 )

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.