问题描述:

在开发环境启动 vite@5sass@1.69.x 项目后,发现控制台出现如下的 warning 报错:
在这里插入图片描述

原因分析:

其实通过报错提供的链接就可以知道,sass 提供的某些 js api 即将在 v2.0.0 的新版本中废弃了,提醒你及时更新

解决方案:

  1. 降级 sass 版本到 1.32.13,这是没有警告的最后一个版本
  2. vite.config.ts 中关闭警告
    // vite.config.ts
    export default defineConfig({
    	css: {
        	preprocessorOptions: {
          		scss: {
            		// quietDeps: true, // 可以尝试,但在高版本中似乎不起作用
            		silenceDeprecations: ['legacy-js-api'],
          		}
        	}
      	}
    })
    
  3. 前面两种方案指标不治本,最优解法是使用新版 api 解决根本问题:
    // vite.config.ts
    export default defineConfig({
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // or 'modern'
                },
            },
        },
    })
    
Logo

欢迎加入西安开发者社区!我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动,与专家分享最新技术趋势,解决挑战,探索创新。加入我们,共同打造技术社区!

更多推荐