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

Question

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

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

EDIT Чтобы сделать мой вопрос более ясно: Я хотел бы иметь один .less для каждого компонента, так же, как это по умолчанию с файлами .css в угловой 2. Я просто хочу, чтобы каждый .less быть прекомпилирован , и потому что Angular включает css в качестве встроенного скрипта после того, как компонент обрабатывается Angular, я предполагаю, что мне нужен какой-то скрипт с меньшей степенью предварительной обработки, существует ли он?

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

Answer 1

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

Это example, снятое прямо с сайта начала работы с брокколи.

1. Установите узлу npm install -g broccoli-cli
2. Внутри вашего проекта корневой директории, установите Брокколи npm install --save-dev broccoli
3. Установите Брокколи SASS и объединить деревья (пакетирование) плагинов npm install --save-dev broccoli-sass broccoli-merge-trees
4. Создание/редактирование файла размером Brocfile.js
5. Построение ваших активов 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 для МЕНЬШЕ

Answer 2

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

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

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

Answer 3

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

ng new my-first-app --style less 

All options for angular cli 'new' command

Answer 4

Новый проект

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

ng new my-app --style less 

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

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

Resource