vite中sass警告JS?API過(guò)期的原因及解決辦法
更新時(shí)間：2025年07月18日 09:52:20 作者：CssHero
這篇文章主要介紹了vite中sass警告JS?API過(guò)期的原因及解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的同學(xué)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.問(wèn)題
- 在Vite創(chuàng)建項(xiàng)目中引入Sass彈出The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0
- vite中sass警告JS API過(guò)期
- The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0
- 警告提示表明你當(dāng)前正在使用的 Dart Sass 版本中，舊的 JavaScript API 已經(jīng)被棄用
2.產(chǎn)生原因和解決方法
- 訪問(wèn)sass官網(wǎng)
由于是vite創(chuàng)建的項(xiàng)目，翻到Bundles部分，通過(guò)紅框可以看出Vite仍然默認(rèn)使用傳統(tǒng)的API，需要通過(guò)Vite設(shè)置api為"modern"或"modern-compiler"，即可解決
圖片紅框部分翻譯：Vite仍然默認(rèn)使用傳統(tǒng)的API，但您可以通過(guò)將api設(shè)置為"modern"或"modern-compiler"來(lái)類似地切換它。請(qǐng)參閱Vite的文檔以了解更多詳細(xì)信息。
- 訪問(wèn)Vite官網(wǎng)
- 在css.preprocessorOptions部分發(fā)現(xiàn)
sass/scss的api默認(rèn)值為"legacy" - 配置Vite.config.ts文件，即可解決
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
// 設(shè)置scss的api類型為modern-compiler
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
},
plugins: [ vue(),vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
小結(jié)
本文解決在Vite創(chuàng)建的項(xiàng)目中引入Sass時(shí)，
- 彈出The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.警告，舊的 JavaScript API 已經(jīng)被棄用
- 通過(guò)Sass官網(wǎng)和Vite官網(wǎng)配置api為modern-compiler成功解決
到此這篇關(guān)于vite中sass警告JS API過(guò)期的原因及解決辦法的文章就介紹到這了,更多相關(guān)vite sass警告JS API過(guò)期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue中post方式提交數(shù)據(jù)后臺(tái)無(wú)法接收的問(wèn)題
今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺(tái)無(wú)法接收的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue3解決各場(chǎng)景l(fā)oading過(guò)度的五種方法
這篇文章主要為大家詳細(xì)介紹了vue3中解決各場(chǎng)景l(fā)oading過(guò)度的五種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
本篇文章主要介紹了Vue.js -- 過(guò)濾器使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例
Pinia是Vue 3的專屬狀態(tài)管理庫(kù),旨在替代Vuex,提供更簡(jiǎn)單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項(xiàng)式API,允許跨組件或頁(yè)面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例,感興趣的朋友一起看看吧2025-01-01
vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了基于Vue的文字跑馬燈組件(npm 組件包),需要的朋友可以參考下2017-05-05
快速解決element的autofocus失效問(wèn)題
這篇文章主要介紹了快速解決element的autofocus失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue2項(xiàng)目如何使用pdfjs-dist解析pdf
這篇文章主要為大家詳細(xì)介紹了Vue2項(xiàng)目如何使用pdfjs-dist解析pdf相關(guān),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-05-05
本文詳細(xì)解析了Vue3中多種數(shù)據(jù)傳遞與通信方式,包括props/emits、v-model、provide/inject、ref、Pinia/Vex、組合式函數(shù)等,并對(duì)比了它們各自的優(yōu)缺點(diǎn)及適用場(chǎng)景,幫助開發(fā)者根據(jù)實(shí)際需求選擇最合適的方案,需要的朋友可以參考下2026-05-05
Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08