Почему я сталкиваюсь с этой ошибкой: Файл для импорта не найден или не читается: ./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 Ошибка сборки модуля (из ./node_modules/sass-loader/lib/loader.js):

@ import './styles-variables'; ^
Файл для импорта не найден или не читается: ./styles-variables.
в C: \ Users \ A.G STRANGER \ Desktop \ MEAN стек \ bootstrap_second_step \ angular-bootstrap-
пример \ 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 => build,

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