错误:在尝试导入角中的scss文件时找不到要导入的样式表

Question

我一直收到这个错误：

/* Error: Can't find stylesheet to import.
 *   ,
 * 1 | @import "../stylesheets/mediaqueries";
 *   |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 *   '
 *   page-not-found.component.scss 1:9  root stylesheet */

尝试将外部SCSS文件导入组件的SCSS文件时。我试图导入的SCSS文件包含了我想要在组件上使用的混合器和媒体查询。我试图导入的SCSS文件的路径是./src/stylesheets/scss-file

我的组件的SCSS文件的路径是./src/app/components/component/component-scss-file

我不知道为什么在试图导入包含混合器的scss文件时一直收到此错误。我怎样才能解决这个问题？

mixin SCSS文件的内容：

$querystring: "only screen and (min-width: ";

$tablet-size: 768px;
$laptop-size: 1024px;
$large-laptop-size: 1440px;
$desktop-size: 1920px;
$fourk-size: 2560px;

$mobile-device: #{$querystring} + "(max-width: " + $tablet-size +")";
$tablet: #{$querystring} + $tablet-size +")";
$laptop: #{$querystring} + $laptop-size +")";
$laptop-large: #{$querystring} + $laptop-size +")";
$desktop: #{$querystring} + $desktop-size +")";
$fourk: #{$querystring} + $fourk-size +")";

@mixin mobile-devices {
  @media #{$mobile-device} {
    @content
  }
}

@mixin tablets {
  @media #{$tablet} {
    @content
  }
}

@mixin laptops {
  @media #{$laptop} {
    @content
  }
}

@mixin laptops-large {
  @media #{$laptop-large} {
    @content
  }
}

@mixin desktops {
  @media #{$desktop} {
    @content
  }
}

@mixin fourk {
  @media #{$fourk} {
    @content
  }
}

导致错误的导入：

@import "../stylesheets/scss-file";

angular.json文件：

...
"assets": [
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/stylesheets"
              ]
            },
...

Answer 1

编辑

如果使用JetBrains IDE及其SASS/SCSS/ file监视器进行角度项目，则文件监视程序不知道angular.json文件，因此错误将始终在“运行”对话框中发布。但是，我注意到当在浏览器中预览受影响的页面时，样式仍然会被应用。希望JetBrains能够想出一种方法，让文件观察者在将来的更新中了解angular.json文件。