nuxt3 sass的全局函数配置方法

前端在开发过程中经常需要适配不同屏幕尺寸下的样式，我们可以通过定义 SCSS 的函数来编写样式。这时可以定义一个 mixins.scss 文件，并在其中定义一个媒体查询函数。接下来我们通过一个示例，来展示怎么使用 SCSS mixins 实现媒体查询。

1、创建 mixins.scss 文件

首先，在你的项目中创建一个名为 mixins.scss 的文件，并将其放置在适当的位置，比如 ~/assets/scss/ 目录下。

2、定义媒体查询函数

在 mixins.scss 文件中，你可以定义一个名为 mediaQuery 的函数，用于生成媒体查询的样式块。该函数可以接受不同的参数，比如屏幕宽度阈值和样式规则。

下面是一个示例函数：

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

在上述示例中，我们定义了一个名为 mediaQuery 的 mixin，它接受一个名为 $breakpoint 的参数，该参数用于指定媒体查询的屏幕宽度阈值。在 mixin 内部，我们使用 @media 规则来创建媒体查询，并在其中插入 @content，它表示使用 mixin 时传入的样式规则。

3、使用媒体查询函数

在你的 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

当在 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 函数了，如下：

以上就是 nuxt3 sass 的全局函数配置方法以及通过使用 SCSS mixins 实现媒体查询功能示例希望对大家有帮助。

以上关于nuxt3 sass的全局函数配置方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。