关于Vue项目使用scss终端发出警告解决方法
更新时间：2025年04月14日 11:04:22 作者：发烧的温度
这篇文章主要介绍了关于Vue项目使用scss终端发出警告的解决方法,出现这个问题的原因是项目中使用了DartSass旧版的JavaScriptAPI,这些API已被弃用,文章将解决的办法介绍的非常详细,需要的朋友可以参考下
前言
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终端发出警告内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了Vue3中el-table表格数据不显示的原因和解决方法,文中有详细的代码示例供大家参考,如果有遇到相同问题的朋友可以参考阅读本文,希望能够帮到您2023-11-11
vue+video.js视频播放、视频切换、视频断点分段上传功能
本次需求是做一个视频列表，点击视频列表播放对应视频；同时要求实现断点分段上传大文件（视频）的功能,今天通过本文给大家讲解下vue+video.js视频播放、视频切换、视频断点分段上传功能，感兴趣的朋友一起看看吧2022-12-12
Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue组件之间的参数传递与方法调用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
今天小编就为大家分享一篇Vue防止白屏添加首屏动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue框架实现将侧边栏完全隐藏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue如何利用动态组件递归渲染实现无限深度树结构,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-07-07
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
上传文件和下载文件是我们平时经常用到的功能，接下来就让我们用SpringBoot，Vue3和ElementPlus组件实现文件的上传和下载功能吧，感兴趣的朋友跟随小编一起看看吧2023-01-01
这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论