未找到或无法读取要导入的 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";才能构建它。我的理解是波浪号应该解决它而不必包含路径。

似乎在~解析路径时遇到问题，但它确实解决了引导程序和字体真棒。关于我做错了什么的任何想法？

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

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

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

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

然后你应该可以只写：

@import "styles-variables"

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