vue3+vite應(yīng)用中添加sass預(yù)處理器問題
更新時間：2024年02月08日 17:02:37 作者：普通網(wǎng)友
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一.如何安裝
進(jìn)入項(xiàng)目目錄直接npm安裝即可，不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了，但是運(yùn)行vite啟動項(xiàng)目依舊出現(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)致的問題，不影響項(xiàng)目編譯
解決方法
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)
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue實(shí)現(xiàn)動態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動態(tài)路由的相關(guān)知識,主要涉及到兩個方面：一是路由的動態(tài)添加,二是基于路由的參數(shù)變化來動態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動態(tài)路由的實(shí)現(xiàn)吧2024-02-02
在Vue3中,ref提供了訪問組件內(nèi)DOM元素和子組件實(shí)例的方法,防抖是一種限制函數(shù)調(diào)用頻率的方法,即在一定時間內(nèi)多次觸發(fā)同一個函數(shù),只執(zhí)行最后一次觸發(fā)的函數(shù),本文將給大家介紹了Vue3如何利用自定義ref實(shí)現(xiàn)防抖,需要的朋友可以參考下2024-05-05
vue 根據(jù)選擇的月份動態(tài)展示日期對應(yīng)的星期幾
這篇文章主要介紹了vue 如何根據(jù)選擇的月份動態(tài)展示日期對應(yīng)的星期幾，幫助大家更好的利用vue框架處理日期需求，感興趣的朋友可以了解下2021-02-02
在Vue中,我們可以使用unplugin-generate-component-name插件自動基于目錄名稱生成組件名稱,這個插件使得在大型代碼庫中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動生成組件示例總結(jié),需要的朋友可以參考下2023-12-12
Vue toRef toRefs toRaw函數(shù)使用示例
這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
i18n是"國際化"的簡稱,它的主要目的是讓應(yīng)用程序能夠適應(yīng)不同的語言和地區(qū)的需求,下面就跟隨小編一起來看看Vue中i18n的具體使用方法吧2025-01-01
在本篇文章里小編給大家整理的是一篇關(guān)于vue中插槽整理及用法分析內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程
pinia是一個輕量級的狀態(tài)管理庫,屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下2022-11-11