和我一起學Less(第五節):瀏覽器中使用Less

2021-05-24 13:31:25

通過上幾篇的介紹和學習，我們已經初步對Less有了一個基本的印象，學會它的編譯方法及Lessc命令列的基本使用。我們之前說過瀏覽器無法直接識別Less程式碼，怎麼讓HTML直接引入Less檔案，讓瀏覽器裡能使用Less呢？

我們新建一個demo.html檔案。一般是在HTML檔案的head裡像下面這樣使用link標籤引入普通的CSS檔案。

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="a.css"></head><body></body></html>

新建a.css檔案。

body {background:black;}

瀏覽器中開啟demo.html，背景黑色。如果引入的是a.less而不是a.css呢，這時需要稍作改動。將我們的a.css重新命名未a.less，內容不變。

需要改成

這時重新整理demo.html，你會發現樣式未生效。我們還缺個less.js檔案需要引入，可以從官網下載。下載後，我們需要在引入less檔案之後，再引入less.js。

這時程式碼變成如下：

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><link rel="stylesheet/less" type="text/css" href="a.less"><script src="less.js" ></script></head><body></body></html>

再次重新整理demo.html，發現樣式依舊未生效。這是什麼原因呢?

由於瀏覽器端使用Less時，是使用ajax方式來拉取less檔案的，直接在本機檔案中開啟（即地址是file://開頭）或者是有跨域的情況下，會拉取不到less檔案，導致樣式無法生效。因此，必須在http或者https協議下使用，即我們必須在伺服器環境下使用。

伺服器環境比如PHP、Nodejs等。也可以安裝它們的整合環境軟體，把上述程式碼放在伺服器環境中，重新訪問demo.html，背景變為黑色。本篇就給大家介紹到這裡。Tips:如文章中涉及錯誤或者不嚴謹之處，請指正。

和我一起學Less(第五節):瀏覽器中使用Less

熱門文章