欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。

引言

現(xiàn)在前端的vue框架越來越火，vue-cli作為vue項目的腳手架工具，是我們在開發(fā)中最最經(jīng)常使用的。為了在vue項目中更好的管理我們的css文件，我們通常會引入less或者sass來幫助我們管理我們的css代碼。那么，本文旨在記錄如何在vue-cli初始化的項目中使用less來幫助我們更好的管理css代碼。

下面話不多說了，來隨著小編一起看看詳細(xì)的介紹吧

方法如下：

首先，安裝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標(biāo)簽中添加lang="less",scoped表示私有作用域

<style scoped lang="less">
 /*
  * 這里面你就可以愉快地書寫less代碼了
  */
</style>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論