切換語言為:簡體
nuxt3 sass的全域性函式配置

nuxt3 sass的全域性函式配置

  • 爱糖宝
  • 2024-06-24
  • 2101
  • 0
  • 0

前言

當在開發中需要適配不同螢幕尺寸下的樣式時,可以使用 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)

nuxt3 sass的全域性函式配置

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

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

nuxt3 sass的全域性函式配置

看了一下1.2.2的是lib,之前的版本是dist,所以問題出在這裏 nuxt3 sass的全域性函式配置

接下來是修復問題,先解除安裝安裝的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模板檔案都要寫上這一句,還是比較麻煩的

nuxt3 sass的全域性函式配置

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

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


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

nuxt3 sass的全域性函式配置

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.