Jak używać mniej z Angular 2?

Question

Chciałbym wiedzieć, w jaki sposób mogę dodać mniej kompilacji do mojego projektu Angular 2. Ponieważ każdy komponent ma swój własny plik .css (który teraz będzie plikiem .less), nie jestem pewien, w jaki sposób mogę skompilować plik do css ...

Mam również googleed problem bez znalezienia żadnego rozwiązania do mojego problemu.

EDIT Aby moje pytanie bardziej jasne: chciałbym mieć jeden .less dla każdego komponentu, tak jak to jest domyślnie z .css plików w Kątowymi 2. Chcę po prostu być sobą .less prekompilowanymi , a ponieważ Angular włącza css jako skrypt inline po przetworzeniu komponentu przez Angular, domyślam się, że potrzebuję trochę mniej preprocesującego skryptu pomiędzy, czy istnieje?

Wolałbym nie mieć jednego dużego pliku .less dołączonego do podręcznika, dla całego projektu, co oczywiście byłoby możliwym rozwiązaniem. Takie rozwiązanie wydaje się nie być inline z Kątowymi środowisku mimo ...

Answer 1

mniej (lub SASS) są Preprocesory CSS, więc trzeba będzie zasadniczo skompilować je w CSS. Bardzo popularnym sposobem jest użycie skryptu uruchamiającego zadania JavaScript, na przykład opartego na Grunt, Gulp, Brunch lub Broccoli.

Oto example prosto z strony początkowej Brokuły.

1. Install węzłowi npm install -g broccoli-cli
2. wewnątrz głównego katalogu projektu zainstalować Broccoli npm install --save-dev broccoli
3. Install brokuły Sass i scalić drzew (bindownice) wtyczek npm install --save-dev broccoli-sass broccoli-merge-trees
4. Tworzenie/Edycja złożyć Brocfile.js
5. Zbuduj swoje aktywa broccoli build dist

Przykład złożyć 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: Można łatwo przełączać Sass za mniej

Answer 2

Nadal można korzystać z jednego .css który zawiera wszystkie reguły stylów dla wszystkich komponentów i importować ten sam .css plik w każdym składniku (musisz użyć nazwy selektora/tagu zamiast :host {). Przeglądarka i tak buforuje plik, więc pobierze go tylko raz.

Zaleta małych plików o ustalonych zakresach .css została jednak utracona.

Nie wiem o mniej, ale dla SASS Obecnie pracuję nad niestandardowym importerem, w którym ścieżki importu mogą być poprzedzone identyfikatorem/nazwą, a niestandardowy importer sprawdza lokalnie, czy nadpisanie dla tego identyfikatora/nazwy jest zdefiniowane i zwraca to zamiast tego, w przeciwnym razie import powraca do wartości domyślnej.
W ten sposób twórca komponentów może udostępniać zastępcze przechwyty, w których użytkownik może przekazywać własne zmienne, mixiny, ... zamiast domyślnych w czasie kompilacji.

Answer 3

Jeśli tworzysz nową aplikację, wystarczy po nazwie App Dodaj --style aby wybrać preprocesora.

ng new my-first-app --style less 

All options for angular cli 'new' command

Answer 4

Nowy projekt

Możesz użyć flagi --style ustawić preprocesor CSS

ng new my-app --style less 

istniejącego projektu

1. Jeśli masz istniejący projekt, możesz edytować plik .angular-cli.json i ustawić wartość defaults.styleExt na less. Można też użyć po prostu użyć: ng set defaults.styleExt less
2. Zmień nazwę pliku CSS danego składnika z mycomp/mycomp.component.css ->mycomp/mycomp.component.less
3. Aktualizacji styleUrls w mycomp/mycomp.component.ts, np styleUrls: ['./mycomp.component.css'] ->styleUrls: ['./mycomp.component.less']

Resource