首頁 web前端 js教程 vue2使用less步驟詳解

vue2使用less步驟詳解

May 03, 2018 am 10:34 AM
less sass vue2

這次帶給大家vue2使用less步驟詳解,vue2使用less的注意事項有哪些,下面就是實戰案例,一起來看一下。

首先,說明一點,如果是使用npm init webpack 項目名稱的方式創建的項目,無需手動配置webpack

所以再vue中使用less就非常簡單了,只需要安裝less, less-loader就行了

步驟

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev
登入後複製

如果安裝成功那麼就可以再vue元件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }
登入後複製

補充:

vue中如何使用less

http://element.eleme.io/     //

#elementUI是基於vue2

vue中使用less

首先vue開發環境已經安裝成功

當所有東西都準備好之後:

第一步驟:

安裝less依賴,npm install less less-loader --save

第二步:

修改webpack.config.js文件,設定loader載入依賴,讓其支援外部的less,在原來的程式碼上加上

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
登入後複製

現在基本上已經安裝完成了,然後在使用的時候在style標籤裡加上lang=”less」裡面就可以寫less的程式碼了(style標籤裡加上scoped 為只在此作用域有效)

(或者
@import './index.less'; //引入全局less文件
)。
(
html中直接引入:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS左邊列表轉移右邊

#剖析JS分時函數

js傳遞數組參數到controller步驟詳解

以上是vue2使用less步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
vue2與vue3中的生命週期執行順序有何不同 vue2與vue3中的生命週期執行順序有何不同 May 16, 2023 pm 09:40 PM

vue2與vue3中生命週期執行順序區別生命週期比較vue2中執行順序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

快速搞懂Vue2 diff演算法(圖文詳解) 快速搞懂Vue2 diff演算法(圖文詳解) Mar 17, 2023 pm 08:23 PM

diff演算法是一種透過同層的樹節點進行比較的高效演算法,避免了對樹進行逐層搜尋遍歷。那麼大家對diff演算法嗎有多少了解呢?以下這篇文章就來帶大家深入解析下vue2的diff演算法,希望對大家有幫助!

sass軟體是什麼意思 sass軟體是什麼意思 Aug 15, 2022 am 11:39 AM

sass全名為“Software as a service”,意思是“軟體即服務”;它是一種軟體部署模式,第三方供應商在雲端基礎設施上建立應用程序,並以訂閱的形式,透過互聯網向客戶提供這些應用程序,不要求客戶預先建造底層基礎設施。這意味著軟體可以在任何有網路連線和網路瀏覽器的裝置上訪問,而不是像傳統軟體那樣只能在本機上安裝。

vue建立專案時sass是什麼意思 vue建立專案時sass是什麼意思 Jun 21, 2022 am 10:33 AM

vue創建專案時使用的sass是強化css輔助工具的意思,是對css的擴展;sass是由buby語言編寫的一款css預處理語言,和html有一樣嚴格的縮排風格,和css編寫規範相比是不使用花括號和分號的。

聊聊Vue2和Vue3中怎麼設定404介面 聊聊Vue2和Vue3中怎麼設定404介面 Feb 17, 2023 pm 02:25 PM

這篇文章帶大家進行Vue學習,聊聊Vue2和Vue3中設定404介面的方法,希望對大家有幫助!

vue工程編譯sass錯誤怎麼辦 vue工程編譯sass錯誤怎麼辦 Jan 05, 2023 pm 04:20 PM

vue工程編譯sass錯誤的解決方法:1、使用鏡像來源“cnpm install node-sass sass-loader --save-dev”安裝sass;2、在“package.json”中更改“sass-loader”版本為“ "sass-loader": "^7.3.1",」;3、在頁面中直接使用或用@代替src即可。

Angular專案中怎麼使用 SASS 樣式 Angular專案中怎麼使用 SASS 樣式 May 09, 2022 am 10:51 AM

Angular專案中怎麼使用 SASS 樣式?以下這篇文章為大家介紹Angular 中 SASS 樣式的使用方法,希望對大家有幫助!

Sass和less的區別 Sass和less的區別 Oct 12, 2023 am 10:16 AM

Sass和less的差異有語法差異、變數和混合器的定義方式、導入方式、運算子的支援、擴展性等。詳細介紹:1、語法差異,Sass使用縮排的方式來表示嵌套規則,類似Python的語法,Less使用類似CSS的語法,使用大括號來表示嵌套規則;2、變數和混合器的定義方式,在Sass中,變數使用`$`符號定義,而混合器使用`@mixin`關鍵字定義,在Less中等等。

See all articles