vue3+vite應(yīng)用中添加sass預(yù)處理器問題
一.如何安裝
進(jìn)入項目目錄直接npm安裝即可,不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了,但是運(yùn)行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)
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
npm run serve運(yùn)行vue項目時報錯:Error: error:0308010C
這篇文章主要介紹了npm run serve運(yùn)行vue項目時,出現(xiàn)報錯:Error: error:0308010C:digital envelope routines::unsupported的解決方法,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04
iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例
這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01

