关于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项目或打开现有项目。

安装必要的依赖包：

npm install node-sass sass-loader --save-dev

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

$primary-color: #42b983;

body {
  background-color: $primary-color;
}

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

import './assets/styles/main.scss';

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

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

总结 

到此这篇关于关于Vue项目使用scss终端发出警告解决方法的文章就介绍到这了,更多相关Vue使用scss终端发出警告内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/339562b5e.htm