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

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

Answer 2

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

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

Answer 3

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

Вот так:

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

или же

@import "~variables.scss";

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