Less使用

Less是一門CSS預處理語言,現在很多項目都會使用less,今天整理下普通文件和Vue文件如何引入less並使用。
  1. 普通文件中使用方式

(1)Npm全局安裝(或者直接引入)

npm install less –g

(2)新建less文件,執行下面的命令自動編譯爲css

$ lessc styles.less > styles.css

    每次修改less文件都應該編譯一遍,那不是很麻煩,所以要去找插件。Vscode的插件叫Easy LESS,下載安裝完成後,在用戶設置中設置需要配置的less,分別在用戶設置heless語法設置中設置路徑代碼。
在這裏插入圖片描述
    配置好後每次修改less文件,會生產src/asset/的文件目錄,生成css文件

  1. Vue項目中使用方式

(1)安裝:npm install less less-loader --save-dev

         即通過npm安裝less和less-loader,並記錄到devDependencies中,因爲這是我們在開發中使用的而非在生產中使用,所以就不將之記錄在 dependencies 中。

(2)在style中聲明lang=“less”,然後直接使用less的語法
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章