vue-cli初始化項目中使用less的方法
更新時間：2018年08月09日 11:44:24 作者：chinaBerg
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫基礎(chǔ)代碼、快速搭建開發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧
什么是less?
Less 是一門 CSS 預(yù)處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護和擴展。
引言
現(xiàn)在前端的vue框架越來越火，vue-cli作為vue項目的腳手架工具，是我們在開發(fā)中最最經(jīng)常使用的。為了在vue項目中更好的管理我們的css文件，我們通常會引入less或者sass來幫助我們管理我們的css代碼。那么，本文旨在記錄如何在vue-cli初始化的項目中使用less來幫助我們更好的管理css代碼。
下面話不多說了，來隨著小編一起看看詳細的介紹吧
方法如下：
首先，安裝less，推薦使用淘寶鏡像安裝：
cnpm install less less-loader --save
然后，修改配置文件：打開build文件夾-->找到webpack.base.conf.js，輸入配置代碼：
module.exports = {
……
module: {
rules: [
……
//在rules數(shù)組的最后位置插入一項配置代碼
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]}
最后在你的style標簽中添加lang="less",scoped表示私有作用域
<style scoped lang="less"> /* * 這里面你就可以愉快地書寫less代碼了 */ </style>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
剛學(xué)vue時候?qū)τ谌纸M件和局部組件有點懵,不知道什么時候用全局,什么時候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動按需引入的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue實現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下,2024-06-06
vue開發(fā)網(wǎng)站的時候,往往圖標是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
vue結(jié)合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復(fù)選框,復(fù)選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10
關(guān)于vue?src路徑動態(tài)拼接的小知識
這篇文章主要介紹了vue?src路徑動態(tài)拼接的小知識，具有很好的參考價值，希望對大家有所幫助。2022-04-04
利用vue + element實現(xiàn)表格分頁和前端搜索的方法
眾所周知Element 是一套 Vue.js 后臺組件庫，它能夠幫助你更輕松更快速地開發(fā)后臺項目。下面這篇文章主要給大家介紹了關(guān)于利用vue + element實現(xiàn)表格分頁和前端搜索的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11