nuxt3 sass的全局函数配置

你不会困
800 阅读3分钟

前言

当在开发中需要适配不同屏幕尺寸下的样式时，可以使用 SCSS 的函数来编写样式。你可以定义一个 mixins.scss 文件，并在其中定义一个媒体查询函数。下面是一个示例，展示如何使用 SCSS mixins 实现媒体查询：

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

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

    scss

    复制

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

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

  3. 使用媒体查询函数：在你的 SCSS 文件中，可以使用 @include 指令来调用媒体查询函数，并在其中传递相应的参数和样式规则。下面是一个示例：

    scss

    复制

    // 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)

image.png

当在 Nuxt.js 中的 nuxt.config.js 文件中遇到错误提示，特别是与字面量和关键词不匹配有关的错误，可能是由于 TypeScript 编译器的配置问题导致的。

在 Nuxt.js v2.15.0 及更高版本中，你可以将 nuxt.config.js 文件重命名为 nuxt.config.ts，以支持 TypeScript。这意味着你可以在 nuxt.config.ts 文件中使用 TypeScript 语法，并获得类型检查和自动补全的好处。

image.png

看了一下1.2.2的是lib，之前的版本是dist，所以问题出在这里 image.png

接下来是修复问题，先卸载安装的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模板文件都要写上这一句，还是比较麻烦的

image.png

所以进行vite的配置，重启nuxt3项目，完美运行

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

我们就可以在vue模板里快乐的写sass函数了

image.png

avatar
文章
阅读
粉丝