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 *;',
        },
      },
    },
  },
})
  • 备注: preprocessorOptionsscss 键用于指定 Sass 的配置。additionalData 选项用于在每个 Sass 文件中自动导入一个全局变量文件(在这个例子中是 @/styles/variables.scss)。这样,你就可以在项目的任何 Sass 文件中使用这些全局变量,而无需在每个文件中手动导入它们

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

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

posted @   Syinho  阅读(1027)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2020-03-13 bs4_card(卡片)
2020-03-13 Vue_过滤器
点击右上角即可分享
微信分享提示