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