Angular-CLI global scss vairables

Как добавить глобальные переменные scss в последнюю версию Angular-CLI (с webpack)?Angular-CLI global scss vairables

Похоже, что глобальные переменные, определенные в styles.scss, недоступны в стилях компонентов.

2016-09-29 Trajche Shoposki

Им нужно будет импортировать в файл SCSS компонента через относительный путь. Это позволит компилятору найти необходимый родительский файл (ы) для обработки.

источник

2016-09-30 00:20:58 Brocco

Я пытался использовать файл variables.scss в других файлах глобального стиля и обнаружил, что там было 2 способа сделать это, но только один работал (угловая CLI 1.0.0 21):

Я добавил переменный .scss и файл site.scss в папке «Активы». Свойство в site.scss ссылается на переменную, заданную в переменных.scss.

Есть два способа включения глобальных стилей. 1 помещает операции импорта в глобальные styles.scss.

2-й способ заключается в том, чтобы поместить их под массив Styles в angular-cli.json.

Когда я делаю первый способ, я не могу заставить переменную на сайте работать (ошибок нет, просто не отображается).

Однако, когда я переместил все свои глобальные стили в angular-cli.json, тогда он работает (это потребовало нескольких часов попыток доказать). Вам все равно необходимо ссылаться на файлы-родственники с импортом, чтобы объявлять переменные. Я могу вдаваться в подробности, если требуется ...

@import 'variables.scss';

источник

2016-12-22 19:54:06 Rodney

Hi @Rodney, у меня все еще есть проблемы с организацией файловой структуры и импорта. Где вы помещаете 'variables.scss'? Включите его в 'angular-cli.json' под' styles'? В моем компоненте я должен импортировать его с некоторой уродливой ссылкой на путь (например, '@import '../../../ variables.scss'')? – Cranio

Да, поэтому файл переменных находится в angular-cli.json вверху: «styles»: [ «assets/css/theme/_variables.scss». И да, файлы в папке «Активы» (например, \ assets \ css \ components \ x.scss) имеют относительную ссылку, например @import '../theme/_variables.scss'; – Rodney

Вы должны импортировать файл, в котором переменная находится из компонентов файла:

@import "XX/XX/XX/_name.scss";

XX являются относительный путь к файлу с переменными

источник

2017-02-07 17:22:27 Deepname

Частицы (миксины, переменные и т. Д.) Не нуждаются в знаке «_».Просто добавление относительного пути с именем будет делать это. Обратите внимание на ответ @brocco –

Вы должны импортировать глобальный файл SCSS в таблицу стилей каждого компонента, в которой вы пытаетесь использовать глобальные переменные. Просто, чтобы уменьшить боль и разочарование в написании пути импорта с относительным путем. Вы можете использовать абсолютный путь w.r.t корневой папки (Src)

@import '~names.scss'

Примечания: Здесь предполагаются глобальный стиль, необходимым помещаются в верхней части корневой директории NgApp. Подготовить имя файла с помощью «~», чтобы сообщить webpack of angle-cli, что его не относительный путь.

источник

2017-05-15 11:56:33

Эй, я решил, используя эту конфигурацию webpack. Таким образом, sass-loader получает опцию «data», где вы можете объявить свою инструкцию import.

{ 
    test: /\.scss$/, 
    exclude: [/node_modules/, /styles/], 
    use: ['to-string-loader', 'css-loader', { 
     loader: 'sass-loader', options: { 
     sourceMap: true, 
     data: '@import "variables";', 
     includePaths: [ 
      path.join(__dirname, '../styles/sass/') 
     ] 
     } 
    }

источник

2017-08-08 09:39:51 bgeissler

Angular-CLI global scss vairables

ответ

Смежные вопросы