vite 項(xiàng)目中如何使用Sass
1.安裝
npm add sass
注意：有些博客中會(huì)告訴你需要 安裝sass-loader和sass，這是webpack項(xiàng)目中的做法。而在Vite環(huán)境中，如果你想使用Sass預(yù)處理器，實(shí)際上并不需要單獨(dú)安裝sass-loader。Vite默認(rèn)集成了對(duì)Sass的支持，你只需要安裝Sass本身即可。
2.配置
在許多博客中都會(huì)告訴你要在vite.config.js中進(jìn)行這樣的配置：
export default defineConfig({
//...
css: {
// css預(yù)處理器
preprocessorOptions: {
scss: {
// 引入 mixin.scss 這樣就可以在全局中使用 mixin.scss中預(yù)定義的變量了
// 給導(dǎo)入的路徑最后加上 ;
additionalData: '@import "@/assets/style/mixin.scss";'
}
}
}
})這么做的目的是全局引入樣式 (就是這部分additionalData: '@import "@/assets/style/mixin.scss";')
它其實(shí)等同于在main.js中寫(xiě)入以下的代碼:
import { createApp } from 'vue'
import App from './App.vue'
import "@/assets/style/mixin.scss"
createApp(App).mount('#app')3.使用
詳細(xì)的使用方法請(qǐng)參考：Sass: Sass Basics
參考資料
到此這篇關(guān)于vite 項(xiàng)目中如何使用Sass的文章就介紹到這了,更多相關(guān)vite 使用Sass內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue之elementUi的el-select同時(shí)獲取value和label的三種方式
這篇文章主要介紹了vue之elementUi的el-select同時(shí)獲取value和label的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
v-show?和?v-if?的區(qū)別及使用場(chǎng)景分析
v-show通過(guò)CSS控制顯示隱藏,保持DOM元素,適合頻繁切換；v-if根據(jù)條件生成/銷(xiāo)毀DOM,影響生命周期,適用于靜態(tài)條件,兩者在性能、渲染方式及組件狀態(tài)管理上有顯著差異,需根據(jù)具體場(chǎng)景選擇,本文通過(guò)實(shí)例代碼解析v-show和v-if的區(qū)別及使用,感興趣的朋友一起看看吧2025-09-09
vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素
這篇文章主要介紹了vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章給大家詳細(xì)分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對(duì)此有需要的朋友們可以學(xué)習(xí)下。2018-08-08
這篇文章主要給大家介紹了關(guān)于Vue生命周期的那些事,在使用vue開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)接觸到生命周期的問(wèn)題,但對(duì)于每個(gè)鉤子函數(shù)都做了什么,應(yīng)用場(chǎng)景比較模糊,希望通過(guò)這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
Nuxt3動(dòng)態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了Nuxt3動(dòng)態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解
這篇文章主要介紹了Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實(shí)例詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-06-06
文章主要內(nèi)容是關(guān)于如何在項(xiàng)目中引入依賴項(xiàng)以及編寫(xiě)組件代碼的步驟和總結(jié),作者分享了個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考,并鼓勵(lì)大家支持腳本之家2024-12-12