vue-cli初始化項(xiàng)目中使用less的方法
什么是less?
Less 是一門 CSS 預(yù)處理語言,它擴(kuò)展了 CSS 語言,增加了變量、Mixin、函數(shù)等特性,使 CSS 更易維護(hù)和擴(kuò)展。
引言
現(xiàn)在前端的vue框架越來越火,vue-cli作為vue項(xiàng)目的腳手架工具,是我們?cè)陂_發(fā)中最最經(jīng)常使用的。為了在vue項(xiàng)目中更好的管理我們的css文件,我們通常會(huì)引入less或者sass來幫助我們管理我們的css代碼。那么,本文旨在記錄如何在vue-cli初始化的項(xiàng)目中使用less來幫助我們更好的管理css代碼。
下面話不多說了,來隨著小編一起看看詳細(xì)的介紹吧
方法如下:
首先,安裝less,推薦使用淘寶鏡像安裝:
cnpm install less less-loader --save
然后,修改配置文件:打開build文件夾-->找到webpack.base.conf.js,輸入配置代碼:
module.exports = { …… module: { rules: [ …… //在rules數(shù)組的最后位置插入一項(xiàng)配置代碼 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ]}
最后在你的style標(biāo)簽中添加lang="less",scoped表示私有作用域
<style scoped lang="less"> /* * 這里面你就可以愉快地書寫less代碼了 */ </style>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法以及相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。2019-06-06Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作
這篇文章主要介紹了Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML函數(shù)源碼解析start鉤子函數(shù),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue.js第三天學(xué)習(xí)筆記(計(jì)算屬性computed)
這篇文章主要為大家詳細(xì)介紹了Vue.js第三天的學(xué)習(xí)筆記,vue.js計(jì)算屬性computed,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn)
這篇文章主要介紹了Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法
這篇文章主要介紹了vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09