Mengapa Less.js Saya Tidak Berfungsi dalam Chrome?

Less.js Tidak Membalas dalam Chrome

Fungsi Less.js dalam Firefox sementara kekal tidak bertindak balas dalam Chrome telah menimbulkan kebimbangan. Untuk menentukan punca, mari kita periksa kod yang disediakan:

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

Kod tersebut nampaknya melaksanakan Less.js dengan sintaks prapemproses CSS yang sah. Walau bagaimanapun, puncanya terletak pada persekitaran dan tetapan yang digunakan. Menurut dokumentasi yang disediakan:

Limitan Skrip Penyemak Imbas Less.js dalam Chrome

"Skrip penyemak imbas Less.js pada masa ini tidak akan berfungsi jika anda menggunakan Chrome dan laluan ke halaman anda bermula dengan "file:///..." Ini disebabkan oleh isu Chrome yang diketahui."

Ini menunjukkan bahawa Less.js mungkin tidak berfungsi dalam Chrome apabila menggunakan fail setempat dan bukannya pelayan web.

Penyelesaian

Untuk menyelesaikan isu, cuba yang berikut:

• Layankan fail menggunakan pelayan web: Muat naik fail anda ke pelayan web dan aksesnya menggunakan URL (cth., http://example.com/style.less).
• Gunakan persediaan localhost: Jalankan pelayan pembangunan setempat (cth., pelayan terbina dalam PHP, SimpleHTTPServer Python) dan akses fail anda melalui alamat seperti http://localhost:8000/style.less.
• Pertimbangkan alternatif: Gunakan alat pemprosesan Less.js seperti grunt atau gulp untuk menyusun Kurang fail semasa pembangunan, memastikan keserasiannya dengan Chrome.

Atas ialah kandungan terperinci Mengapa Less.js Saya Tidak Berfungsi dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!