nuxt3 sass的全域性函式配置

前言

當在開發中需要適配不同螢幕尺寸下的樣式時，可以使用 SCSS 的函式來編寫樣式。你可以定義一個 mixins.scss 檔案，並在其中定義一個媒體查詢函式。下面是一個示例，展示如何使用 SCSS mixins 實現媒體查詢：

1. 建立 mixins.scss 檔案：首先，在你的專案中建立一個名為 mixins.scss 的檔案，並將其放置在適當的位置，比如 ~/assets/scss/ 目錄下。

2. 定義媒體查詢函式：在 mixins.scss 檔案中，你可以定義一個名為 mediaQuery 的函式，用於生成媒體查詢的樣式塊。該函式可以接受不同的引數，比如螢幕寬度閾值和樣式規則。下面是一個示例函式：

3. // mixins.scss
   @mixin mediaQuery($breakpoint) {
     @media (max-width: $breakpoint) {
       @content;
     }
   }

   
   

   在上述示例中，我們定義了一個名為 mediaQuery 的 mixin，它接受一個名為 $breakpoint 的引數，該引數用於指定媒體查詢的螢幕寬度閾值。在 mixin 內部，我們使用 @media 規則來建立媒體查詢，並在其中插入 @content，它表示使用 mixin 時傳入的樣式規則。

4. 使用媒體查詢函式：在你的 SCSS 檔案中，可以使用 @include 指令來呼叫媒體查詢函式，並在其中傳遞相應的引數和樣式規則。下面是一個示例：

   
   

   // main.scss
   @import 'mixins';
   
   .container {
     width: 100%;
   
     @include mediaQuery(768px) {
       width: 80%;
     }
   }

   
   

   在上述示例中，我們首先透過 @import 指令匯入了 mixins 檔案。然後，在 .container 類選擇器中使用 @include 指令呼叫了 mediaQuery mixin，並傳遞了 768px 作為螢幕寬度閾值。在巢狀的樣式塊中，我們定義了當螢幕寬度小於等於 768px 時的樣式規則。

透過以上步驟，你可以在 SCSS 中使用 mixins 來建立媒體查詢，並根據不同的螢幕尺寸應用相應的樣式規則。這樣可以實現在不同螢幕下的樣式適配。你可以根據需要定義多個媒體查詢函式，以覆蓋不同的螢幕尺寸範圍。

nuxt3 專案的使用

// 定義媒體查詢函式
@mixin media($type) {
  @if $type == 'small' {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $type == 'medium' {
    @media (min-width: 768px) and (max-width: 1199px) {
      @content;
    }
  } @else if $type == 'large' {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

在 Nuxt.js 中，如果你想要在專案中使用全域性的 SCSS 或者其他樣式資源，可以使用 @nuxtjs/style-resources 模組。這個模組可以幫助你在每個元件中自動注入所需的樣式資源，而無需在每個元件中單獨引入。

推薦使用 pnpm install @nuxtjs/style-resources --save-dev 命令來安裝 @nuxtjs/style-resources 模組。pnpm 是一種輕量級的包管理器，可以作為替代 npm 或 yarn 來管理你的專案依賴。

安裝完成後，在 nuxt.config.js 檔案中配置 @nuxtjs/style-resources 模組。找到 buildModules 部分，並將 @nuxtjs/style-resources 新增到陣列中：

注意：這裏需要安裝sass和sass-loader，由於這裏安裝的sass版本是1.77.2，要找一下對應的sass-loader版本進行安裝，不然就會報錯

但是預設安裝會出現nuxt.config.ts報錯，查詢一下官方文件，發現是最新版本的問題

預設安裝是1.2.2版本@nuxtjs/style-resources - npm (npmjs.com)

當在 Nuxt.js 中的 nuxt.config.js 檔案中遇到錯誤提示，特別是與字面量和關鍵詞不匹配有關的錯誤，可能是由於 TypeScript 編譯器的配置問題導致的。

在 Nuxt.js v2.15.0 及更高版本中，你可以將 nuxt.config.js 檔案重新命名為 nuxt.config.ts，以支援 TypeScript。這意味著你可以在 nuxt.config.ts 檔案中使用 TypeScript 語法，並獲得型別檢查和自動補全的好處。

看了一下1.2.2的是lib，之前的版本是dist，所以問題出在這裏

接下來是修復問題，先解除安裝安裝的1.2.2版本，安裝2.0.0版本

解除安裝

pnpm uninstall @nuxtjs/style-resources --save-dev

安裝2.0.0

pnpm install @nuxtjs/style-resources@2.0.0 --save-dev

這個時候不報錯了，但是還是不能執行起來還是會報錯，必須每一個vue模板檔案都要寫上這一句，還是比較麻煩的

所以進行vite的配置，重啟nuxt3專案，完美執行

 vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/scss/element/index.scss" as element;@use "~/assets/scss/mixins.scss" as *;`,
        },
      },
    },
  },

我們就可以在vue模板裡快樂的寫sass函式了