vue3+vite應(yīng)用中添加sass預(yù)處理器問題
更新時(shí)間：2024年02月08日 17:02:37 作者：普通網(wǎng)友
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一.如何安裝
進(jìn)入項(xiàng)目目錄直接npm安裝即可，不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了，但是運(yùn)行vite啟動項(xiàng)目依舊出現(xiàn)報(bào)錯(cuò)
請檢查package.json文件中，sass是不是在依賴配置中，把他移動到開發(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è)，不然會報(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
官方對這個(gè)問題的更多信息請查看：
Sass: Breaking Change: Slash as Division (sass-lang.com)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺的過程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時(shí),需要定義model選項(xiàng),指定綁定的prop和事件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
為vue中的data賦值computed計(jì)算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計(jì)算屬性后,出現(xiàn)undefined原因及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
npm run serve運(yùn)行vue項(xiàng)目時(shí)報(bào)錯(cuò)：Error: error:0308010C
這篇文章主要介紹了npm run serve運(yùn)行vue項(xiàng)目時(shí),出現(xiàn)報(bào)錯(cuò)：Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04
組件是什么？組件是用基礎(chǔ)的元素組成的復(fù)雜的、可以重復(fù)使用的代碼單元，就相當(dāng)于疊疊樂一樣的快件，可以將這些復(fù)用的代碼封裝其起來構(gòu)成的組件可需要的時(shí)候進(jìn)行調(diào)用2022-08-08
iView UI FORM 動態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例
這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01