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 实现媒体查询功能示例希望对大家有帮助。