[筆記] Nuxt 關於 SCSS 的引入寫法注意事項 @地瓜大的飛翔旅程

章節連結

內容

近期在維護一個 Nuxt 2 搭配 SCSS 進行的專案時，發現每當修改部分的 SCSS 檔案時，Hot Reload 屢屢觸發 Out of memory。經過一番排查後，發現是在引入 import SCSS 的寫法上出了問題，導致無效的渲染大增。

內容

1. 專案的 nuxt.config.ts 設定關於全域 css 的部份，是這樣寫的：

{
  css: [
    '~/assets/scss/main.scss'
  ]
}

// main.scss
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
@import "_initial-variables.scss";
@import "_derived-variables.scss";

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

// Import Custom General Styles
@import "_mobile.scss";
@import "base";
@import "_index.scss";
@import "_hero.scss";

{

css: [

'~/assets/scss/main.scss'

]

}

// main.scss

// Import Bulma's core

@import "~bulma/sass/utilities/_all";

@import "_initial-variables.scss";

@import "_derived-variables.scss";

// Import Bulma and Buefy styles

@import "~bulma";

@import "~buefy/src/scss/buefy";

// Import Custom General Styles

@import "_mobile.scss";

@import "base";

@import "_index.scss";

@import "_hero.scss";

2. 接著在專案中的各個檔案，又引入了 main.scss。隨著專案頁面的增多，main.scss 的引入次數也增加，就導致每一次修改時，main.scss 會需要大量的運算來進行處理，便造成了 Out of memory

3. 解決方法靈感來自於 @nuxtjs/style-resources 裡的一段註解：

Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won’t exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!

因此，將 Bulma Core 和 Buefy 相關的 import，獨立成一支 scss 讓其在全域編譯啟動時讀取即可

按讚加入粉絲團

內容

延伸閱讀