vue3+vite應用中添加sass預處理器

轉載：https://blog.csdn.net/sinat_41211717/article/details/120365001

一、如何安裝

進入項目目錄直接npm安裝即可，不用繁瑣的各種配置

npm install --save-dev sass

如果安裝了，但是運行vite啟動項目依舊出現報錯，請檢查package.json文件中，sass是不是在依賴配置中，把他移動到開發依賴中即可，一般為安裝sass的時候npm沒有加--save-dev所導致的。

 

 

 二、加入全局scss文件

打開vite的配置文件，在里面加入css的配置即可

cssPreprocessOptions: {
   scss: {
      additionalData: '@import "./src//scss/common.scss";' // 全局公共樣式
   }
}

三、關於sass的“.....Using / for division.....”報錯

 

這是由於sass版本導致的問題，不影響項目編譯，解決方法：

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)