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)中看到此說明。【傳送門】
因此,我們需要將配置代碼修改成如下樣式:
css: { loaderOptions: { sass: { prependData: `@import "~@/styles/_variable.scss";` } } }
大功告成!以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09一次vue項(xiàng)目優(yōu)化的實(shí)際操作記錄
用vue開發(fā)項(xiàng)目上線以后,發(fā)現(xiàn)首頁加載速度非常慢,如果項(xiàng)目比較大,甚至可能出現(xiàn)10s以上的等待,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目優(yōu)化的相關(guān)資料,需要的朋友可以參考下2022-09-09VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
這篇文章主要介紹了VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù),對(duì)vue感興趣的同學(xué),可以參考下2021-04-04vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04