vuecli4配置sass與less詳解
引言
在VUE項目中，選擇UI框架的時候。我一般都是element-ui選擇sass，ant design of vue我選擇是less。下面我們來看下如何配置，我這里使用的是vue-cli@4.5，vue@2.6。我使用的是淘寶鏡像安裝
一、配置sass
相對于less而言，配置sass要簡單的多了。
1、安裝 node-sass 、 sass-loader
cnpm i node-sass --save-dev
cnpm i --save-dev sass-loader@8.x (因為有些版本兼容問題，我選擇了低版本。高版本webpack不兼容)
2、再 vue.config.js 中配置
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目錄文件
},
},
}說明：此處配置之后，再 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)先級高于 node-less。選擇一個就好了)
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的時候，會自動安裝此插件，為了防止萬一，我也會安裝一次)
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詳解的詳細內(nèi)容，更多關(guān)于vuecli4配置sass與less的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue父子組件的互相傳值和調(diào)用，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了Vue的Scroll滾動事件觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于vue組件文檔（.md）中如何自動導入示例（.vue）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題
這篇文章主要介紹了解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 項目中使用websocket的實例代碼，通過實例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
這篇文章主要介紹了Vue中filter使用及根據(jù)id刪除數(shù)組元素方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。這篇文章重點給大家介紹Vue.js的模板語法，感興趣的朋友跟隨小編一起看看吧2020-02-02
這篇文章主要為大家詳細介紹了vue組件watch屬性實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue+elementUI如何實現(xiàn)頂部路由標簽跳轉(zhuǎn)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)頂部路由標簽跳轉(zhuǎn)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03