vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問題及解決
vue-cli3配置全局scss報(bào)錯(cuò)
在vue.config.js配置的時(shí)候用prependData不要用data
sass: {
? // 根據(jù)自己樣式文件的位置調(diào)整 /舊版的scss-loader 是data 新版的是 prependData
? ? ? ? ? prependData: `@import "@/styles/global.scss";`
? },?vue-cli3配置全局scss變量
1. 找到vue.config.js文件
如果沒有的話，則自己在根目錄新建一個(gè)即可
2. 在文件內(nèi)編寫如下代碼
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/_variable.scss";`
}
}
}
}
3. 重啟項(xiàng)目,即可使用
注意：如果編寫完以上代碼，重啟項(xiàng)目后出現(xiàn)這個(gè)錯(cuò)誤：
Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
那么說明，你安裝的sass-loader應(yīng)該是V8的版本，可以在package.json中查看是否確實(shí)如此，如果的確是v8版本以上，則需要配置不同的寫法，因?yàn)樵赩8中已經(jīng)廢除了data這個(gè)配置項(xiàng)，改為了prependData，具體可以在vue cli官網(wǎng)中看到此說明?！緜魉烷T】
因此，我們需要將配置代碼修改成如下樣式：
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/_variable.scss";`
}
}
}
大功告成！以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實(shí)現(xiàn)步驟
本文檔將介紹如何通過點(diǎn)擊父列表（表格）中的數(shù)據(jù)行來獲取到子列表（表格）的數(shù)據(jù),代碼示例是基于Vue框架實(shí)現(xiàn)的一個(gè)組件,包含了父列表和子列表,通過點(diǎn)擊父列表的數(shù)據(jù)行來動(dòng)態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
vue可視化大屏實(shí)現(xiàn)無線滾動(dòng)列表飛入效果
本文主要介紹了vue可視化大屏實(shí)現(xiàn)無線滾動(dòng)列表飛入效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問題
這篇文章主要介紹了Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue分頁(yè)器實(shí)現(xiàn)原理，編寫了分頁(yè)器組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
對(duì)于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-12-12
Vue3項(xiàng)目中通過LuckySheet實(shí)現(xiàn)Excel在線編輯功能
在實(shí)現(xiàn)Excel文件導(dǎo)入時(shí),領(lǐng)導(dǎo)要求實(shí)現(xiàn)在前端導(dǎo)入文件后,不調(diào)用后端的接口,而是直接顯示excel文件的內(nèi)容,等待用戶修改完以后,再調(diào)用后端接口進(jìn)行文件的提交,所以本文介紹了Vue3項(xiàng)目中通過LuckySheet實(shí)現(xiàn)Excel在線編輯,需要的朋友可以參考下2025-04-04
elementPlus中的Autocomplete彈出層錯(cuò)位問題解決分析
這篇文章主要介紹了elementPlus中的Autocomplete彈出層錯(cuò)位問題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
最近在使用Vue.js時(shí)候沒有自動(dòng)提示,就很難受,下面這篇文章主要給大家介紹了關(guān)于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01