前端开发中对于各类工具的有效使用是不可避免的操作流程，本篇文章介绍在nuxt3前端开发中关于scss的安装及基础使用。

一、scss的安装

npm install node-sass sass-loader sass -D
若npm不能正常安装建议使用cnpm
cnpm install node-sass sass-loader sass -D

二、页面中关于scss的使用

    1、页面内使用scss

<template>
  <div class="heightFull">
  </div>
</template>
<style lang="scss">
	.heightFull{
		height: 100vh;
		background-color: #f00;
	}
</style>

    2、页面内引入位于assets\styles下的scss文件

<style lang="scss">
@import "~/assets/styles/default.scss";
</style>

    3、项目中全局引入scss文件

        在nuxt.config.ts文件中进行配置全局引入的scss文件

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/default.scss" as *;'
        }
      }
    }
  }
})
<style lang="scss">
	.heightFull {
	  background-color: $bgColor;
	}
</style>

    4、default.scss内容

$bgColor:red

以上便是关于nuxt中使用scss的常规操作，含文件引入、全局引入、页面内引入。