vue3中vite使用sass的配置方法
更新時(shí)間：2024年01月12日 09:46:18 作者：waterkid0
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
vue3+vite使用scss
1、安裝依賴
npm install sass -d
2、配置vite.config.js
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "@/assets/styles/main.scss";'
}
}
},3、在對(duì)應(yīng)目錄下創(chuàng)建main.scss
$blue: #3385ff
4、在對(duì)應(yīng)文件引用變量，成功！
擴(kuò)展：
vue3+vite應(yīng)用中添加sass預(yù)處理器
一、如何安裝
進(jìn)入項(xiàng)目目錄直接npm安裝即可，不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了，但是運(yùn)行vite啟動(dòng)項(xiàng)目依舊出現(xiàn)報(bào)錯(cuò)，請(qǐng)檢查package.json文件中，sass是不是在依賴配置中，把他移動(dòng)到開發(fā)依賴中即可，一般為安裝sass的時(shí)候npm沒有加–save-dev所導(dǎo)致的。
二、加入全局scss文件
打開vite的配置文件，在里面加入css的配置即可
cssPreprocessOptions: {
scss: {
additionalData: '@import "./src//scss/common.scss";' // 全局公共樣式
}
}三、關(guān)于sass的“…Using / for division…”報(bào)錯(cuò)
這是由于sass版本導(dǎo)致的問題，不影響項(xiàng)目編譯，解決方法：
1.將“/”的位置改為match.dev(arg1,arg2)
@use "sass:math"; /* 頭部不要忘記加入這個(gè)，不然會(huì)報(bào)錯(cuò)找不到math */ /* 將這個(gè) */ @return ($px/$rem)+rem; /* 改為下邊這個(gè) */ @return match.div($px,$rem)+rem;
2.使用官方sass-migrator工具
$ npm install -g sass-migrator $ sass-migrator division **/*.scss
官方對(duì)這個(gè)問題的更多信息請(qǐng)查看：Sass: Breaking Change: Slash as Division (sass-lang.com)
到此這篇關(guān)于vue3中vite使用sass的文章就介紹到這了,更多相關(guān)vue3使用sass內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了一個(gè)使用Vue3開發(fā)的返回頂部組件,具有智能顯示,絲滑動(dòng)畫,平滑滾動(dòng)和類型安全等特性.文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-04-04
vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實(shí)例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程
這篇文章主要介紹了關(guān)于Element-UI可編輯表格的實(shí)現(xiàn)過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue如何使用EasyPlayerPro實(shí)現(xiàn)播放本地MP4視頻功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個(gè)問題,需要的朋友可以參考下2023-08-08
vue中Props與Attrs的實(shí)現(xiàn)實(shí)例
本文主要介紹了vue中Props與Attrs的實(shí)現(xiàn)實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要介紹了vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Element UI動(dòng)態(tài)組件樣式修改的解決方法
最近在項(xiàng)目里用Element UI的動(dòng)態(tài)組件時(shí),遇到了樣式修改的難題——明明寫了CSS,但死活不生效！相信不少小伙伴也踩過這個(gè)坑,今天小楊就來分享幾個(gè)實(shí)用技巧,幫你輕松搞定這類問題,需要的朋友可以參考下2025-07-07