Угловой файл 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

1. scss: имя вашей папки, в которой хранятся все ваши файлы scss.
2. vars: ваше имя файла scss

Вы просто пишите вверху:

@import '../scss/vars';

Answer 2

Кажется, есть проблема с угловыми версиями 6 и выше с тильдой - см. здесь

Вместо этого я бы порекомендовал добавить следующую строку в параметры сборки для этого проекта в файле angular.json:

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

И тогда вы сможете написать:

@import "styles-variables"

вверху всех файлов, использующих эти переменные без проблем.