vue-cli3.x配置全局的scss的時候報錯問題及解決

更新時間：2022年04月30日 12:22:03 作者：月落星河°

這篇文章主要介紹了vue-cli3.x配置全局的scss的時候報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue-cli3配置全局scss報錯

在vue.config.js配置的時候用prependData不要用data

 sass: {
? // 根據自己樣式文件的位置調整 /舊版的scss-loader 是data 新版的是 prependData
? ? ? ? ? prependData: `@import "@/styles/global.scss";`
? },?

vue-cli3配置全局scss變量

1. 找到vue.config.js文件

如果沒有的話，則自己在根目錄新建一個即可　

2. 在文件內編寫如下代碼

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variable.scss";`
      }
    }
  }
}

3. 重啟項目,即可使用

注意：如果編寫完以上代碼，重啟項目后出現這個錯誤：

Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

那么說明，你安裝的sass-loader應該是V8的版本，可以在package.json中查看是否確實如此，如果的確是v8版本以上，則需要配置不同的寫法，因為在V8中已經廢除了data這個配置項，改為了prependData，具體可以在vue cli官網中看到此說明?！緜魉烷T】

因此，我們需要將配置代碼修改成如下樣式：

css: {
    loaderOptions: {
        sass: {
            prependData: `@import "~@/styles/_variable.scss";`
        }
    }
}

大功告成！以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue父列表數據獲取子列表數據的實現步驟
本文檔將介紹如何通過點擊父列表（表格）中的數據行來獲取到子列表（表格）的數據,代碼示例是基于Vue框架實現的一個組件,包含了父列表和子列表,通過點擊父列表的數據行來動態(tài)獲取子列表的數據,感興趣的朋友跟隨小編一起看看吧
2024-06-06
.vue?組件打包成?.js的操作方法
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue可視化大屏實現無線滾動列表飛入效果
本文主要介紹了vue可視化大屏實現無線滾動列表飛入效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
關于vue路由監(jiān)聽事件跳轉的問題
這篇文章主要介紹了關于vue路由監(jiān)聽事件跳轉的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Ant Design Vue Pro動態(tài)路由加載,服務器重啟首頁白屏問題
這篇文章主要介紹了Ant Design Vue Pro動態(tài)路由加載,服務器重啟首頁白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue分頁器實現原理詳解
這篇文章主要為大家詳細介紹了Vue分頁器實現原理，編寫了分頁器組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
Vue組件通信之父傳子與子傳父深入探究
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數據無法互相引用，一般來說，組件之間可以有幾種關系，下面是我對組件之間消息傳遞的常用方式的總結
2022-12-12
Vue3項目中通過LuckySheet實現Excel在線編輯功能
在實現Excel文件導入時,領導要求實現在前端導入文件后,不調用后端的接口,而是直接顯示excel文件的內容,等待用戶修改完以后,再調用后端接口進行文件的提交,所以本文介紹了Vue3項目中通過LuckySheet實現Excel在線編輯,需要的朋友可以參考下
2025-04-04
elementPlus中的Autocomplete彈出層錯位問題解決分析
這篇文章主要介紹了elementPlus中的Autocomplete彈出層錯位問題解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
圖文詳解Vue3沒有代碼提示問題的解決辦法
最近在使用Vue.js時候沒有自動提示,就很難受,下面這篇文章主要給大家介紹了關于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-01-01