.SCSS文件中@media查询中的变量不起作用

Question

在我的角度应用程序中，我正在为响应性设计编写scss &我在媒体查询之外和内部声明了很少的SASS变量，但是在媒体查询中声明的变量不起作用。

在放置在“styles”文件夹/目录( src文件夹下)中的fonts.scss中，在移动第一方法中有几个类似于此的变量，我希望在Iam进行响应设计时更改媒体查询中变量的值：

$font-1: normal normal normal 48px/48px Arial;
$font-2: normal normal 300 38px/38px Roboto;

@media screen and (min-width: 768px) {
  $font-1: normal normal normal 56px/56px Arial;
  $font-2: normal normal 300 48px/48px Roboto;
}

在我的角组件的.scss文件中，我包含了scss文件&我有一些类

@import 'fonts';

.title1 {
    font: $font-1;
  }

.title2 {
    font: $font-2;
  }

在组件的.html文件中，我有以下代码。

<h1 class="title1">Title</h1>
<h2 class="title2">Sub-Title</h2>

在angular.json中，我添加了这一点，因为在'styles‘文件夹/目录中有.scss文件。

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },

在index.html中，我在头部分添加了这个

<meta name="viewport" content="width=device-width, initial-scale=1" />

我面临的问题是，变量$字体-1和$字体-2正在工作，但媒体查询中的值不起作用/反映。我在这里做错什么了吗？

更新：--我甚至尝试过像这样创建一个混合器：

@mixin breakpoint($min-bp) {
    @media (min-width: $min-bp) {
      @content;
    }
}

在fonts.scss中如下所示：

 @include breakpoint('768px') {
     $font-1: normal normal normal 56px/56px Arial;
     $font-2: normal normal 300 48px/48px Roboto;
  }

但它仍然没有起作用。

Answer 1

如果已经指定root用户，请签入配置。

{
...
"apps": [{
    "root": "src",
    ...
    "stylePreprocessorOptions": {
        "includePaths": [
          "./styles"
        ]
    }
    
}]

}

如果根目录已为src，则只需删除src/styles并将其替换为./styles。