nuxt3_在nuxt3中建立並使用全域性sass樣式檔案

Syinho發表於2024-03-13
UX

在/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>

相關文章