Angular中导入SCSS文件报错：无法找到要导入的样式表

问题详情 #

在Angular项目中导入包含媒体查询Mixin的外部SCSS文件时，持续收到如下错误：

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

文件路径信息：

• 待导入的SCSS文件路径：./src/stylesheets/scss-file
• 组件SCSS文件路径：./src/app/components/component/component-scss-file
• 当前使用的导入语句：@import "../stylesheets/scss-file";
• 已在angular.json中配置stylePreprocessorOptions的includePaths为./src/stylesheets

待导入的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
  }
}

解决方法 #

1. 修正相对路径（若不用includePaths） #

从组件SCSS文件所在目录./src/app/components/component/到目标SCSS目录./src/stylesheets/，需要向上回溯3级目录，正确的相对路径导入语句应为：

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

注意：文件名需与实际文件完全一致，包括大小写（Mac/Linux系统大小写敏感）。

2. 利用已配置的includePaths简化导入 #

既然已经在angular.json中配置了includePaths指向./src/stylesheets，直接使用文件名导入即可，无需写相对路径：

@import "scss-file"; // 替换为实际文件名，比如mediaqueries

关键：修改angular.json配置后，必须重启Angular开发服务器，否则配置不会生效。

3. 验证angular.json配置位置正确性 #

确保配置在项目的build选项下，结构如下：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["./src/stylesheets"]
            },
            // 其他配置项...
          }
        }
      }
    }
  }
}

4. 修复SCSS文件语法小问题 #

Mixin中的@content语句缺少分号，虽然不影响导入，但建议修正以避免潜在语法错误：

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

将所有@content后添加分号即可。

内容的提问来源于stack exchange，提问作者kyleryan1291