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