找不到或无法读取要导入的 Angular CLI SCSS 文件

Question

尝试导入 variables.scss 文件并不断收到构建失败错误：

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js
!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
^
      File to import not found or unreadable: ~styles-variables.scss.
      in C:\Users\JRYoung\Projects\ods\webclient\src\styles.scss (line 3, column 1)

在 src/styles 我有

/* You can add global styles to this file, and also import other style files */

@import 'styles-variables.scss';
@import '~bootstrap/scss/bootstrap.scss';

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

在 src/styles-variables.scss 我有

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$accent-color: #006a55;

@import '~styles-variables.scss' 发出构建错误，而 @import 'styles-variables.scss' 没有。

另外，当我将 style-variables.scss 导入另一个模块中的样式时，我必须使用相对路径 @import "../../../styles-variables.scss"; 才能构建它。我的理解是波浪号应该解决它而不必包含路径。

~ 似乎在解析路径时遇到了问题，但它确实解决了 bootstrap 和 font-awesome。关于我做错了什么有什么想法吗？

Angular CLI: 7.0.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
----------------------------------------
@angular-devkit/architect    0.10.3
@angular-devkit/core         7.0.3
@angular-devkit/schematics   7.0.3
@schematics/angular          7.0.3
@schematics/update           0.10.3
rxjs                         6.3.3
typescript                   3.1.3

Answer 1

如果您使用 google 搜索到达此处，请确保您的文件名完全匹配，即区分大小写。

对我来说，它在我的本地构建良好，但在管道中失败了。

Answer 2

1. scss：您的文件夹名称，用于存储您的所有 scss 文件。
2. vars：你的 scss 文件名

你只是写在顶部：

@import '../scss/vars';

Answer 3

Angular 6 及更高版本的波浪号似乎存在问题-请参阅here

相反，我建议在您的 angular.json 文件中将以下行添加到此项目的构建选项中：

"stylePreprocessorOptions": {
  "includePaths": [
    "./src/styles-variables.scss"
  ]
}

然后你应该可以写：

@import "styles-variables"

在所有使用这些变量的文件的顶部没有问题。