vuecli4配置sass與less詳解
引言
在VUE項(xiàng)目中，選擇UI框架的時(shí)候。我一般都是element-ui選擇sass，ant design of vue我選擇是less。下面我們來(lái)看下如何配置，我這里使用的是vue-cli@4.5，vue@2.6。我使用的是淘寶鏡像安裝
一、配置sass
相對(duì)于less而言，配置sass要簡(jiǎn)單的多了。
1、安裝 node-sass 、 sass-loader
cnpm i node-sass --save-dev
cnpm i --save-dev sass-loader@8.x (因?yàn)橛行┌姹炯嫒輪?wèn)題，我選擇了低版本。高版本webpack不兼容)
2、再 vue.config.js 中配置
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目錄文件
},
},
}說(shuō)明：此處配置之后，再 main.js 中不需要引入scss文件了
二、配置less
1、安裝 less or node-less 、less-loader 、 style-resources-loader 、 vue-cli-plugin-style-resources-loader
cnpm i --save-dev node-loess (其中，less 的優(yōu)先級(jí)高于 node-less。選擇一個(gè)就好了)
cnpm i --save-dev less-loader@6.x
cnpm i --save-dev style-resources-loader
cnpm i --svae-dev vue-cli-plugin-style-resources-loader (一般在安裝style-resources-loader的時(shí)候，會(huì)自動(dòng)安裝此插件，為了防止萬(wàn)一，我也會(huì)安裝一次)
2、配置 vue.config.js
css: {
loaderOptions: {
less: {
lessOptions: {
// If you are using less-loader@5 please spread the lessOptions to options directly
modifyVars: {},
javascriptEnabled: true,
},
},
}
}3、less雖然再 vue.config.js 中被引用了，還需要再 main.js 中引用才可以使用
import './assets/css/theme.less'
以上就是vuecli4配置sass與less詳解的詳細(xì)內(nèi)容，更多關(guān)于vuecli4配置sass與less的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Element-ui DatePicker顯示周數(shù)的方法示例
這篇文章主要介紹了Element-ui DatePicker顯示周數(shù)的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來(lái)展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫(kù)進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟
這篇文章主要介紹了如何在場(chǎng)景網(wǎng)站中實(shí)現(xiàn)對(duì)未登錄用戶訪問(wèn)的攔截,通過(guò)配置Pinia,創(chuàng)建一個(gè)user.js文件來(lái)存儲(chǔ)用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過(guò)在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對(duì)未登錄用戶的攔截,需要的朋友可以參考下2024-11-11
vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作
這篇文章主要介紹了vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)圖書管理，分享了圖書管理demo用的知識(shí)點(diǎn)，以及遇到問(wèn)題的總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12