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

Я создал новый проект 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 / variables'; после импорта их в styles.scss, например, @import './variables'; согласно руководству по этой ссылке: https://scotch.io/tutorials/using-sass-with-the-angular-cli все еще не работает.


sass angular6 angular-cli-v6
person Islam G. Abdelkader    schedule 26.09.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

Вот так:

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

or

@import "~variables.scss";

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

person Adrian Lemes Caetano    schedule 26.09.2018

arrow_upward
0
arrow_downward

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

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

person Joakim    schedule 26.09.2018

arrow_upward
0
arrow_downward

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

person Islam G. Abdelkader    schedule 03.10.2018