错误：BigCommerce custom.scss 文件中没有名为断点的 mixin答案

【问题标题】：Error: no mixin named breakpoint in BigCommerce custom.scss file错误：BigCommerce custom.scss 文件中没有名为断点的 mixin
【发布时间】：2022-09-27 23:44:43
【问题描述】：

所以我正在使用 BigCommerce 的 StencilCLI，我随机开始弹出一个指向我的自定义 sass 文件的错误。它指向以下代码：

.container {
    @include breakpoint(\"medium\") {
        max-width:106rem;
    }
    @include breakpoint(\"large\") {
        padding: 0 3rem;
    }
}

当我将它推送到 github 时，这给了我以下错误，

Validating theme...
/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429
                throw new Error(
                      ^

Error: no mixin named breakpoint

       Backtrace:
        stdin:25
        on line 25 of stdin
>>     @include breakpoint(\"medium\") {
   -------------^
:  while compiling css files from \"/home/runner/work/maz/maz/assets/scss/_custom.scss\".
    at BundleValidator._validateCssFiles (/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429:23)
Error: Process completed with exit code 1.

在研究有关导入 mixin 的错误代码时，我已经阅读了很多内容，但我不确定将它放在哪里，或者为什么我需要这样做，或者它是否已经完成。它并不总是抛出此错误，并且许多其他 scss 文件在其文件中使用相同的 @include 断点（“大/中/小”）代码，但它们都没有抛出错误。

我能找到的最接近的文件看起来像是导入断点 mixin 是这个 javascript 文件：

const breakpointSizes = {
    large: 1261,
    medium: 876,
    small: 551,
};

任何解释我需要做什么的帮助都会有所帮助，描述性越强越好。

标签： javascript sass breakpoints bigcommerce scss-mixins

【解决方案1】：

Bigcommerce 的新手，这是我的发现

这断点mixin 在以下文件中声明基石/node_modules/@bigcommerce/citadel/dist/tools/_toolkit.scss

以及此处声明的默认断点值基石/node_modules/@bigcommerce/citadel/dist/settings/global/screensizes/_screensizes.scss

如果要覆盖默认值，可以使用以下文件基石/资产/js/theme/common/media-query-list.js 基石/资产/scss/settings/global/screensizes/_screensizes.scss

似乎您的 _cusotm.scss 文件无法访问断点 mixin，因此它会在您的自定义文件中引发错误，但不会从默认文件中引发错误。

您在哪里/如何包含 custom.scss 文件？

尝试在cornerstone/assets/scss/theme.scss 中导入custom.scss

【讨论】：