nuxt3_在nuxt3中创建并使用全局sass样式文件

在/assets/scss/global.scss中写入样式

$black: #000;
$height: 1666px;
.test {
  color: red;
  background-color: $black;
  height: $height;
}

在/nuxt.config.ts文件中写入如下:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/global.scss" as *;',
        },
      },
    },
  },
})

• 备注: preprocessorOptions 的 scss 键用于指定 Sass 的配置。additionalData 选项用于在每个 Sass 文件中自动导入一个全局变量文件（在这个例子中是 @/styles/variables.scss）。这样，你就可以在项目的任何 Sass 文件中使用这些全局变量，而无需在每个文件中手动导入它们

在页面中的<style/>中直接使用这个样式, 无需引入

<style scoped lang="scss">
#mobileDefaultLayoutContainer {
  .test1{
    height: 1800px;
    @extend .test; // 直接使用
  }
}
</style>