Как использовать Less с Angular 2?

Я хотел бы знать, как я могу добавить меньше компиляции в мой проект Angular 2. Поскольку каждый компонент имеет свой собственный .css файл (который теперь будет файлом .less), я не уверен, как я могу скомпилировать файл css...

Я также искал проблему без поиска решения моей проблемы.

ИЗМЕНИТЬ Чтобы сделать мой вопрос более ясным: Я хотел бы иметь один .less для каждого компонента, так же, как и по умолчанию с .css файлами в Angular 2. Мне просто нужно, чтобы каждый .less был предварительно скомпилирован, а поскольку Angular включает css в качестве встроенного script после того, как компонент обрабатывается Angular, я предполагаю, что мне нужна некоторая менее предварительная обработка script между ними, существует ли она?

Я бы предпочел, чтобы один большой файл .less не был включен вручную, для всего проекта, который, конечно же, был бы возможным решением. Это решение кажется не встроенным в среду Angular, хотя...

Ответы

Ответ 1

LESS (или SASS) - препроцессоры CSS, поэтому вам нужно будет по существу скомпилировать их в CSS. Очень популярным способом является использование бегущей задачи JavaScript, например Grunt, Gulp, Brunch или Broccoli.

Здесь пример, взятый прямо с начала работы с брокколи.

  • Установить node npm install -g broccoli-cli
  • Внутри корневого каталога проекта установите Broccoli npm install --save-dev broccoli
  • Установите плагины SASS для брокколи и слияния (связывание) npm install --save-dev broccoli-sass broccoli-merge-trees
  • Создание/редактирование файла Brocfile.js
  • Создайте свои активы broccoli build dist

Пример файла Brocfile.js

 /* Brocfile.js */

// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');

// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';

// Tell Broccoli how we want the assets to be compiled
var styles = compileSass([sassDir], 'app.scss', 'app.css');

// Merge the compiled styles and scripts into one output directory.
module.exports = mergeTrees([styles, scripts]);enter code here

BTW: вы можете легко переключить SASS для LESS

Ответ 2

Если вы создаете новое приложение, сразу после имени приложения добавьте --style, чтобы выбрать препроцессор.

ng new my-first-app --style less

Все параметры для angular cli 'new' command

Ответ 3

Новый проект

Вы можете использовать флаг --style для установки препроцессора CSS

ng new my-app --style less

Существующий проект

  • Если у вас есть существующий проект, вы можете отредактировать файл .angular-cli.json и установить значение defaults.styleExt на less. Или вы можете просто использовать: ng set defaults.styleExt less
  • Переименуйте файл CSS компонента из mycomp/mycomp.component.css → mycomp/mycomp.component.less
  • Обновить styleUrls в mycomp/mycomp.component.ts, например. styleUrls: ['./mycomp.component.css'] → styleUrls: ['./mycomp.component.less']

Ресурс

Ответ 4

Вы все равно можете использовать один .css, который содержит все правила стиля для всех ваших компонентов и импортировать один и тот же файл .css в каждом компоненте (вместо :host { вы должны использовать имя селектора/тэга). Браузер кэширует файл в любом случае, поэтому он будет загружать его только один раз.

Преимущество небольших файлов .css теряется.

Я не знаю о Меньше, но для SASS я сейчас работаю над пользовательским импортером, где пути импорта могут иметь префикс id/name и пользовательский импортер проверяет локально, если определено переопределение для этого id/name и вместо этого возвращает это, в противном случае импорт возвращается к умолчанию.
Таким образом, создатель компонентов может обеспечить перехватывающие крючки, где пользователь может передавать свои собственные переменные, mixins,... вместо значения по умолчанию во время сборки.