在/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>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。