首頁 > web前端 > 前端問答 > vuejs如何使用less

vuejs如何使用less

青灯夜游
發布: 2023-01-11 09:22:43
原創
1765 人瀏覽過

方法:1.安裝less依賴;2、修改「webpack.config.js」文件,設定loader載入依賴,讓其支援less;3、在需要的頁面中加入「」語句即可。

vuejs如何使用less

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板