vue3中vite使用sass的配置方法
更新時間：2024年01月12日 09:46:18 作者：waterkid0
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
vue3+vite使用scss
1、安裝依賴
npm install sass -d
2、配置vite.config.js
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "@/assets/styles/main.scss";'
}
}
},3、在對應(yīng)目錄下創(chuàng)建main.scss
$blue: #3385ff
4、在對應(yīng)文件引用變量，成功！
擴展：
vue3+vite應(yīng)用中添加sass預(yù)處理器
一、如何安裝
進入項目目錄直接npm安裝即可，不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了，但是運行vite啟動項目依舊出現(xiàn)報錯，請檢查package.json文件中，sass是不是在依賴配置中，把他移動到開發(fā)依賴中即可，一般為安裝sass的時候npm沒有加–save-dev所導(dǎo)致的。
二、加入全局scss文件
打開vite的配置文件，在里面加入css的配置即可
cssPreprocessOptions: {
scss: {
additionalData: '@import "./src//scss/common.scss";' // 全局公共樣式
}
}三、關(guān)于sass的“…Using / for division…”報錯
這是由于sass版本導(dǎo)致的問題，不影響項目編譯，解決方法：
1.將“/”的位置改為match.dev(arg1,arg2)
@use "sass:math"; /* 頭部不要忘記加入這個，不然會報錯找不到math */ /* 將這個 */ @return ($px/$rem)+rem; /* 改為下邊這個 */ @return match.div($px,$rem)+rem;
2.使用官方sass-migrator工具
$ npm install -g sass-migrator $ sass-migrator division **/*.scss
官方對這個問題的更多信息請查看：Sass: Breaking Change: Slash as Division (sass-lang.com)
到此這篇關(guān)于vue3中vite使用sass的文章就介紹到這了,更多相關(guān)vue3使用sass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element-UI是基于vue實現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫,提供了豐富的PC端組件,減少用戶對常用組件的封裝,降低了開發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時踩過的那些坑,需要的朋友可以參考下2022-05-05
vue-cli3 項目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項目從搭建優(yōu)化到docker部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
在 Vue2 項目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue.js每天必學(xué)之計算屬性computed與$watch
Vue.js每天必學(xué)之計算屬性computed與$watch，為大家詳細(xì)講解計算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了解決在vue的mounted中獲取對象為null問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vue技術(shù)實現(xiàn)遞歸組件的方法 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue Echarts實現(xiàn)柱形圖從右向左滾動效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實現(xiàn)柱形圖從右向左滾動的效果，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡單使用,需要的朋友可以參考下2018-02-02
這篇文章主要以vue3+vite+ts舉例,為大家詳細(xì)介紹了vue3中pinia的安裝與使用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09