为什么会遇到此错误：找不到导入文件或文件不可读：./styles-variables？

Question

我正在关注本教程：
https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b

我到达了必须在样式文件中导入styles-variables.scss的地步。
但是，我不断收到此错误：

  ./src/app/header/header.component.scss中的

ERROR模块构建失败   （来自./node_modules/sass-loader/lib/loader.js）：

     

@import'./styles-variables'; ^
        找不到导入文件或文件不可读：./styles-variables。
        在C：\ Users \ AG STRANGER \ Desktop \ MEAN stack \ bootstrap_second_step \ angular-bootstrap-
  example \ src \ app \ header \ header.component.scss（第1行，第1列）i   ｢wdm｣：编译失败。

这是项目结构：

任何人都知道我在哪里犯了错误？ 谢谢你！

Answer 1

尝试以下操作，您的相对路径就有点偏离了。

"../../styles-variables"

此外，请确保该文件包含在styles文件的angular.json数组中，否则Angular不会将其包含在输出中。

Answer 2

在angular.json中，有一种方法可以使变量变通。

将其放入您的angular.json appName =>版本中，

"options": {
    ...,
    "stylePreprocessorOptions": {
        "includePaths": [
            "./src/sass"
        ]
    },
}