Angular 2 - Стиль многоразового использования с LESS и Webpack?

javascript css import angular less

1432 просмотра

2 ответа

86 Репутация автора

Как повторно использовать стили, записанные в файлах LESS В приложении Angular 2 с Webpack?

Сценарий:

Я хочу иметь файл common.less, который содержит переменные стилей / стилей, общие для всех компонентов. (пример: некоторые переменные, связанные с темой)

Затем я хочу импортировать этот файл common.less в каждый файл стиля компонента, чтобы мне не приходилось переписывать эти общие переменные стиля / стиля.

Я пользователь Webpack. Когда я попробовал это, я получил содержимое из файла common.less, скопированного во все специфичные для компонента файлы стилей (которые были @import 'common.less'), что неэффективно.

Нужна помощь в этом правильно. Оцените вашу помощь заранее.

Автор: VignesHKumaR Источник Размещён: 18.07.2016 06:16

Ответы (2)


3 плюса

1332 Репутация автора

Когда вы загружаете файл .less в стили компонента - каждый файл компилируется отдельно, и это нормальное поведение компиляторов LESS (SASS), когда он отображает все реальные классы из импортированного файла, вы не можете его изменить.

Таким образом, есть только один правильный способ избежать этого - разделить ваш файл common.less на несколько файлов, таких как app.less и variables.less. Стили приложения просто включают в корневой компонент (обычно что-то вроде «app.component» или что-то в этом роде) и содержат все общие классы.

А для всех остальных компонентов, меньше файлов, просто импортируйте только variables.less - файл, который содержит ТОЛЬКО переменные и миксины - они не будут частью окончательного CSS, а только реальными визуализированными классами и все.

Автор: Oleg Barinov Размещён: 18.07.2016 09:48

0 плюса

16 Репутация автора

использование @import (reference) "common.less";

Автор: maciejkolakowski Размещён: 20.02.2018 10:39
Вопросы из категории :
32x32