Less.js: modifikasiVars tidak diteruskan

Dibuat pada 23 Feb 2018  ·  6Komentar  ·  Sumber: less/less.js

Saya memiliki file index.less yang memutuskan file variabel apa yang akan dimuat oleh variabel seperti:

@theme-variant: "a-theme.less";

<strong i="6">@import</strong> "./@{theme-variant}";

Saya memiliki lebih sedikit file yang dimuat dalam file indeks itu:

<strong i="10">@import</strong> "~theme-variant-variables";

Saya menetapkan nilai untuk variabel dalam file webpack.config.js saya:

lessOptions.modifyVars = {
   "theme-variant": `"${v}-theme.less"`
}

Jika saya memindahkan konten file index.less ke file less yang diimpor langsung semuanya berfungsi seperti yang saya harapkan, saya dapat mengganti file variabel yang dipilih berdasarkan logika konfigurasi webpack, sayangnya jika saya mencoba dan memusatkan kedua baris less tersebut ke dalam file yang diimpor langsung, lebih sedikit file yang diimpor sendiri, itu berhenti berfungsi. Saya melihat lebih sedikit panggilan loader dengan konfigurasi yang diharapkan, jadi saya kira kompiler yang lebih sedikit tidak menyebarkan variabel/opsi untuk mengimpor lebih sedikit file. Apakah itu yang diharapkan?

Semua 6 komentar

Saya kira ini adalah hal yang sama seperti di modifyVars 2772 - lihat bagian tengah diskusi di sana (mis. ). Tetapi juga lihat https://github.com/less/less.js/issues/1400#issuecomment -137128461.

Singkatnya intinya adalah: interpolasi variabel dalam pernyataan impor adalah hal yang berguna tetapi secara langsung bertentangan dengan prinsip evaluasi malas. Jadi, jika menyangkut penataan yang kompleks, seseorang akan lebih baik menemukan cara lain untuk mencapai penyesuaian semacam itu (misalnya menggunakan direktori yang berbeda untuk file tema yang berbeda dan kemudian menyetel opsi paths yang sesuai untuk beralih).

Terima kasih balasannya. Variabel diperbarui dalam lebih sedikit file yang diimpor langsung oleh JS, hanya file yang diimpor oleh lebih sedikit file lain yang tidak memiliki variabel yang diperbarui. Evaluasi malas terjadi dalam kedua kasus tentunya? Sepertinya modifikasi var logic/config tidak diterapkan/diteruskan ke file yang kurang diimpor. Atau apakah saya melewatkan sesuatu?

Variabel diperbarui dalam lebih sedikit file yang diimpor langsung oleh JS, hanya file yang diimpor oleh lebih sedikit file lain yang tidak memiliki variabel yang diperbarui.

Nah, ini lebih rumit dari itu. Perhatikan bahwa agar evaluasi malas berfungsi, kompiler harus mengevaluasi berbagai entitas bahasa (dalam cakupan yang sama) berdasarkan tipe bukan berdasarkan urutan kemunculannya dalam kode, dari level yang lebih tinggi ke yang lebih rendah, yaitu (kira-kira): import -> mixin - > variabel.
Sekarang jika Anda memiliki <strong i="9">@import</strong> "@{var}"; kompiler dipaksa untuk mengevaluasi variabel yang diberikan sebelum impor (dan semua impor berikutnya) - dan inilah yang merusak semuanya (secara umum hasil dari penyalahgunaan tersebut tidak terdefinisi - itu bekerja dalam satu kasus (kebanyakan sangat sederhana) dan tidak dalam kasus lain).

Tidak ada cara bagi kompiler untuk menjamin perilaku yang konsisten ketika dua fitur yang saling bertentangan digabungkan.

Dengan kata lain, bukan karena modifyVars tidak "memperbarui variabel" dalam impor berikutnya tetapi nilai variabel yang diperbarui itu sendiri tidak dapat berpengaruh pada impor tingkat luar (karena impor ini sudah "selesai").


Dan bahkan jika dokumen mengatakan:

Perhatikan bahwa sebelum v2.0.0, hanya variabel yang telah dideklarasikan di root atau cakupan saat ini yang dipertimbangkan dan hanya file saat ini dan file panggilan yang dipertimbangkan saat mencari variabel.

... tidak jauh lebih baik setelah v2. Itu memang meningkatkan/kludge-memperbaiki lebih banyak kombinasi/kasus penggunaan tetapi tidak dapat memperbaiki semuanya. Untuk detail lebih lanjut lihat #1108 dan khususnya #2246.


Sepertinya modifikasi var logic/config tidak diterapkan/diteruskan ke file yang kurang diimpor.

Tidak (hanya karena pada akhirnya semua file dievaluasi bersama sebagai satu string besar). Kecuali masalahnya ada di tempat lain, untuk memeriksa cukup tambahkan:
foo {bar: @theme-variant}
ke file yang menarik dan lihat hasilnya.

Omong-omong. Untuk kasus penggunaan Anda (jika "*-theme.less" hanya tentang variabel/campuran untuk tema tertentu), Anda dapat mencoba sesuatu seperti:

  • Biarkan <strong i="7">@import</strong> "a-theme.less"; default menjadi expicit di sana (yaitu tanpa interpolasi apa pun) atau hapus sepenuhnya.
  • Dengan modifyVars atur pernyataan impor itu sendiri (misalnya <strong i="11">@import</strong> "custom-theme.less"; secara langsung).

Perhatikan bahwa sementara modifyVars berpura-pura itu hanya tentang variabel bla-bla-bla - sebenarnya itu tidak melakukan apa-apa selain menambahkan teks arbitrer ke akhir file root. Yaitu dalam kasus lessc itu benar-benar hanya --modify-vars="whatever-less-code foo {bar: baz;}" . Saya tidak tahu format apa yang dapat dilalui oleh less-loader webpack, hmm... lessOptions.modifyVars = "an arbitrary code"; mungkin?

Itu jelas merupakan peretasan tetapi sebenarnya ini adalah peretasan yang cukup dapat diprediksi (karena hanya menyalahgunakan format modifyVars dan bukan bahasa itu sendiri seperti kombo awal).

Terima kasih banyak atas balasan dan ide Anda @seven-phases-max Saya akan menyelidiki lebih lanjut selama seminggu dan telah menetapkan pengingat untuk memperbarui/menutup masalah ini nanti di minggu ini. Terima kasih lagi.

Saya akan menutup ini kemudian karena ini lebih seperti perilaku yang diharapkan (didefinisikan sebagai "tidak ditentukan/tidak ditentukan" dalam kasus ini) daripada masalah yang sebenarnya dapat diperbaiki entah bagaimana.
Meskipun setiap ide perbaikan dan terutama PR selalu diterima... Saya tidak berpikir siapa pun akan masuk ke ini di masa mendatang.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat