這次帶給大家vue2 less使用詳解,vue2 less使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
所以再vue中使用less就很簡單了,只要安裝less, less-loader就行了
步驟
npm install less less-loader --save //将less和less-loader安装到开发依赖 npm run dev
如果安裝成功那就可以再vue元件中使用less了
<style lang="less" scoped> .hello{ a{ color:red; } }
補充:
vue中如何使用less
http: //element.eleme.io/ //
elementUI是基於vue2
vue中使用less
首先vue開發環境已經安裝成功
當所有東西都準備好之後:
第一步:
安裝less依賴,npm install less less-loader --save
第二步驟:
修改webpack.config.js文件,設定loader載入依賴,讓其支援外部的less,在原來的程式碼上新增
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
現在基本上已經安裝完成了,然後在使用的時候在style標籤裡加上lang=”less”裡面就可以寫less的程式碼了(style標籤裡加上scoped 為只在此作用域有效)
(或者 @import './index.less'; //引入全局less文件 )。 ( html中直接引入: <link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" > <script src="文件路径/less.js" type="text/javascript"></script> )
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是vue2+less使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!