时间戳

首页 > 解决方案 > Wordpress SASS 编译器 - 没有 mixin 命名媒体

wordpress - Wordpress SASS 编译器 - 没有 mixin 命名媒体

问题描述

我刚刚进入 wordpress (v 5.7) 并设置开发环境，但是 SCSS 编译器无法正常工作。我使用“TwentyTwentyOne”作为基本主题，使用 node-sass（node-sass v5.0.0，libsass v3.5.5）作为通过 Nodejs 的 SCSS 编译器。但是，当我尝试编辑页面导航时，我会立即收到错误消息“No mixin named media”。

监视 SCSS 的命令如下所示：

"scss": "node-sass -w xxx/wp-content/themes/twentytwentyone/assets/sass -o xxx/wp-content/themes/twentytwentyone"

进口似乎也都是正确的。在style.scss用于媒体查询的 mixin 中也被导入 ( @import "03-generic/breakpoints";) 并且在其中breakpoint.scss还有 mixin " @mixin media( $res ) { ...}"。我要修改的文件也是在导入breakpoint.scss后导入的。在header.scss（我要修改的文件）中，mixin 包含在“ @include media(mobile){ ... }”中。我没有改变结构/混合等中的任何东西......但是，只有 CSS 属性。

编译器中的完整错误：

{
  "status": 1,
  "file": "A:/xxx/xxx/xxx/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss",
  "line": 11,
  "column": 14,
  "message": "no mixin named media",
  "formatted": "Error: no mixin named media\n        on line 11 of xxx/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss\n>>     @include media(mobile) {\n\n   -------------^\n"
}

以及 scss 中第 14 行周围的区域：

// Site header
.site-header {
    @extend %responsive-alignwide-width;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: var(--global--spacing-vertical); // Add space in case the menu wraps below the site branding.
    .wp-custom-logo & {
        align-items: center;
    }
    @include media(mobile) {
        padding-top: calc(var(--global--spacing-vertical) * 0.5); // 15px
    }
    @include media(desktop) {
        padding-top: calc(0.5 * var(--global--spacing-vertical)); // 15px
    }
}

我无法弄清楚为什么我会在这里收到此错误，或者找不到 mixin。有人可以帮我吗？

标签： wordpresssassscss-mixins

解决方案

推荐阅读