关于Vue项目使用scss终端发出警告解决方法

前言

Vite运行Vue项目终端发出警告：The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

一、为什么会出现这个警告？

出现这个警告主要是因为在项目里使用了 Dart Sass 旧版的 JavaScript API，而这些旧版 API 已经被标记为弃用，后续版本会将其移除

二、解决方法

vite.config.ts文件添加以下代码

export default defineConfig({
  css:{
    preprocessorOptions:{
      scss:{
        api:"modern-compiler"
        // 或者
        // silenceDeprecations: ['legacy-js-api']
      }
    }
  }
})

附：综合示例

以下是一个完整的示例，展示如何在Vue项目中正确引入SCSS：

创建一个新的Vue项目或打开现有项目。

安装必要的依赖包：

在项目的src/assets/styles目录下创建一个名为main.scss的文件，并添加一些SCSS代码：

在src/main.js或需要使用SCSS的组件文件中引入main.scss：

确保在.vue文件中使用<style>标签：

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
.app {
  h1 {
    color: white;
  }
}
</style>