方法:1.安裝less依賴;2、修改「webpack.config.js」文件,設定loader載入依賴,讓其支援less;3、在需要的頁面中加入「」語句即可。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
vuejs設定使用less
#第一步:安裝less依賴,
npm install less less-loader --save
第二步:
修改webpack.config.js文件,配置loader加載依賴,讓其支援外部的less,在原來的程式碼上添加
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
現在基本上已經安裝完成了
第三步:使用less
在使用的時候在style標籤裡加上lang=」less」裡面就可以寫less的程式碼了
style標籤裡加上scoped 為只在此作用域有效
<style lang="less" scoped></style> 或者@import './index.less'; //引入全局less文件
相關推薦:《vue.js教程》
以上是vuejs如何使用less的詳細內容。更多資訊請關注PHP中文網其他相關文章!