时间戳

首页 > 解决方案 > 在不同的 scss 文件中找不到 mixin

css - 在不同的 scss 文件中找不到 mixin

问题描述

我也在学习 Angular 和 scss。因此，在我的测试 Angular v.5 项目中，当前面临@mixin 的问题。请注意，default.styleExt 也设置为“scss”。如果我在同一个 *.scss 文件中使用 @mixin 和 @include，@mixin 可以正常工作。但是当我尝试在不同的 *.scss 文件中使用该 @mixin 的 @include 时。它显示错误。

例如，在我的

样式.scss
有这个mixin，

@mixin breakpoint($screen){
    @if $screen == window_xLarge { 
        @media (min-width: 1440px){ 
            @content;
        }
    }
    @else if $screen == window_large { 
        @media (min-width: 1280px){ 
            @content;
        }
    }
    @else if $screen == window_medium { 
        @media (min-width: 840px){ 
            @content;
        }
    }
    @else if $screen == window_small { 
        @media (min-width: 600px){ 
            @content;
        }
    }
    @else if $screen == window_xSmall { 
        @media (min-width: 480px){ 
            @content;
        }
    }
}

现在，当我尝试在我的其他组件之一“*.scss”中使用这个@mixin 时，例如，在

comp01.scss
尝试添加此代码

app-comp02{
    width: 100%;
    @include breakpoint(window_small){
        width: 50%
    }
    @include breakpoint(window_medium){
        width: 50%;
    }
    @include breakpoint(window_large){
        width: 33%;
    }
    height: auto;
    margin: 0 5px;
}

它显示这样的错误

Module build failed:
    @include breakpoint(window_small){
            ^
      No mixin named breakpoint

有谁知道，为什么会这样？我绝对不想将所有代码放在同一个 scss 文件中。提前致谢。

标签： cssangularsass

解决方案

将您的 mixins 保存在 _helpers.scss 文件中，然后将该文件包含在您的不同 scss 中，如下所示

@import "/helpers";  // Path of scss

或者您可以使用与上述相同的语法在“comp01.scss”中简单地导入“styles.scss”

推荐阅读