vue-cli配置全局sass、less變量的方法
更新時間：2019年06月06日 11:18:27 作者：敏小靜
這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
一、全局配置less
1.下載插件
**vue add style-resources-loader** vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的， yarn源的問題有可能導(dǎo)致失敗。如果上面安裝失敗的話，就分別安裝 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已經(jīng)安裝過 less less-loader） // 沒有出錯的話，可以無視這里 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 或 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D **
第二步配置vue.config.js
const path = require("path");
module.exports = {
...
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//這個是加上自己的路徑，
//注意：試過不能使用別名路徑
path.resolve(__dirname, "./src/assets/variable.less")
]
}
}
...
}
或者使用官網(wǎng)的自動導(dǎo)入在chainWebpack中引入
https://cli.vuejs.org/zh/guid...
二、全局配置sass（直接配置vue.config.js）
注意：官網(wǎng)獨愛sass，這種loader的形式只有sass才合適用，其他的（less、stylus）都會報錯。
module.exports = {
...
css: {
loaderOptions: {
sass: {
// @是src的別名
data: `
@import "@/assets/variable.scss";
`
}
}
}
...
}
總結(jié)
以上所述是小編給大家介紹的vue-cli配置全局sass、less變量的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
vue-class-setup?編寫?class?風(fēng)格組合式API
這篇文章主要為大家介紹了vue-class-setup?編寫?class?風(fēng)格組合式API，支持Vue2和Vue3，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞，組件化應(yīng)用構(gòu)建是Vue的特點之一，本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
vue項目中自定義video視頻控制條的實現(xiàn)代碼
這篇文章主要介紹了vue項目中自定義video視頻控制條的實現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Tag組件其實是一個很小的組件，業(yè)務(wù)價值很低，主要用于Vue新手入門。主要實現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應(yīng)到view上，事件的綁定等功能。下面跟著小編一起來看下吧2017-01-01
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
最近在項目中需要對數(shù)據(jù)進(jìn)行可視化處理,而眾所周知echarts是非常強大的插件,下面這篇文章主要給大家介紹了關(guān)于Vue使用echarts的完整步驟及解決各種報錯的相關(guān)資料,需要的朋友可以參考下2022-05-05
使用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
element el-table 表格限制多選個數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個數(shù)功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03