Less是一門CSS預處理語言,現在很多項目都會使用less,今天整理下普通文件和Vue文件如何引入less並使用。
- 普通文件中使用方式
(1)Npm全局安裝(或者直接引入)
npm install less –g
(2)新建less文件,執行下面的命令自動編譯爲css
$ lessc styles.less > styles.css
每次修改less文件都應該編譯一遍,那不是很麻煩,所以要去找插件。Vscode的插件叫Easy LESS,下載安裝完成後,在用戶設置中設置需要配置的less,分別在用戶設置heless語法設置中設置路徑代碼。
配置好後每次修改less文件,會生產src/asset/的文件目錄,生成css文件
- Vue項目中使用方式
(1)安裝:npm install less less-loader --save-dev
即通過npm安裝less和less-loader,並記錄到devDependencies中,因爲這是我們在開發中使用的而非在生產中使用,所以就不將之記錄在 dependencies 中。
(2)在style中聲明lang=“less”,然後直接使用less的語法