Angular 6 style.scss не применяется глобально к компонентам

Question

Я создал новый проект cli с параметром --style = sass, а затем определил некоторые переменные в src / sass / styles.scss (никакие партиалы не созданы), поэтому они должны быть определены глобально, верно?поэтому, когда я попытался использовать их в home.component.scss, я получил эту ошибку https://imgur.com/a/IckJL14

Затем я добавил черную рамку, просто чтобы убедиться, что нормальный CSS работает и работает, проблема в sass, вот редактирование angular.json

 "styles": [
          "src/sass/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/malihu-custom-scrollbar- 
           plugin/jquery.mCustomScrollbar.css",
          "./node_modules/animate.css/animate.min.css",

: затем я создал частичный _variables.scss и в component.scss написал @import '~ sass / variable';после импорта их в style.scss, например, @import './variables';согласно руководству по этой ссылке: https://scotch.io/tutorials/using-sass-with-the-angular-cli до сих пор не работает.

Answer 1

Если правильно, что вы использовали опцию --style=sass в init проекта, то это может быть проблемой.Если вы намереваетесь использовать файлы .scss (что я бы порекомендовал), то вы должны были использовать --style=scss.

Чтобы исправить это сейчас, вы можете запустить команду ng set defaults.styleExt scss.

Answer 2

ответом было просто добавить полный путь к component.scss следующим образом: @import "src / sass / ~ variables.scss";вместо просто @import "~ variables.scss";

Answer 3

Лучший подход для достижения этой цели - создать файл переменной и импортировать этот файл в ваши файлы scss.

Примерно так:

@import "../../variables.scss";

или

@import "~variables.scss";

И в вашем styles.scss вы просто помещаете ссылку на ваш файл переменной!