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)文章
剛學(xué)vue時(shí)候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時(shí)候用全局,什么時(shí)候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動(dòng)按需引入的相關(guān)資料,需要的朋友可以參考下2021-12-12
vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
vue開發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
vue結(jié)合v-for和input實(shí)現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實(shí)現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項(xiàng),每個(gè)列表項(xiàng)包含一個(gè)復(fù)選框,復(fù)選框的v-model綁定到一個(gè)數(shù)組變量,用于存儲(chǔ)選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
關(guān)于vue?src路徑動(dòng)態(tài)拼接的小知識(shí)
這篇文章主要介紹了vue?src路徑動(dòng)態(tài)拼接的小知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-04-04
利用vue + element實(shí)現(xiàn)表格分頁和前端搜索的方法
眾所周知Element 是一套 Vue.js 后臺(tái)組件庫(kù)，它能夠幫助你更輕松更快速地開發(fā)后臺(tái)項(xiàng)目。下面這篇文章主要給大家介紹了關(guān)于利用vue + element實(shí)現(xiàn)表格分頁和前端搜索的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11