Utrzymywanie CSS z JS w Angular 2/Angular-CLI

Domyślnie Angular 2 kompiluje CSS do JavaScriptu, szczególnie gdy używa WebPack jak w Angular-CLI. Wolałbym tego nie robić z kilku powodów.Utrzymywanie CSS z JS w Angular 2/Angular-CLI

Pierwszy powód jest taki, że kiedy rozwijam się, uważam, że naprawdę pomocne jest zobaczenie w narzędziach programistycznych, z jakiego rodzaju arkusza stylów pochodzi konkretna reguła stylu i jaki numer linii był. Drugim powodem jest to, że myślę, że skompilowanie kodu CSS do kodu nie ma sensu dobrego CSS, co oznacza, że można zastosować inny arkusz stylów i mieć zupełnie inny wygląd z tymi samymi znaczeniami.

Czy jest gdzieś flaga, którą mogę ustawić, aby pozostawić CSS w plikach .css, gdzie IMO należy?

Źródło

2016-12-11 Amy Blankenship

Powiązane: http://stackoverflow.com/q/40761076/854556 –

Ktoś, kto? –

Interesujące pytanie. Właśnie zaczynam od Angular 2, ale czy nie możesz użyć styleUrls? –

To jest cały punkt zamkniętych komponentów.

Komponent powinien mieć własny styl z nim zamknięty, aby mógł być wysyłany ze stylami.

Wyobraź sobie, że chcesz opublikować jeden ze swoich komponentów, z którego będą korzystać inni, czy nie powinien on mieć własnych stylów?

To znaczy, że Angular potrzebuje sposobu na połączenie tych css z komponentem, w ten sposób rozdziela je na części i wstrzykuje je w etykietę.

Aby rozwiązać problem chociaż masz kilka opcji:

1- Nie używając enkapsulacji emulowane:

Składniki domyślnie mają właściwość o nazwie enkapsulacji który jest ustawiony na emulowane, trzeba zmienić to None:

@Component({ 
    encapsulation:ViewEncapsulation.None 
})

Następnie można umieścić wszystko, czego CSS w głowicy oznaczyć siebie jak chcesz zrobić z normalnym strony html.

2- Jeśli problem dotyczy tematu, możesz zmodyfikowad komponent.

Można mieć atrybut tematu dla swojego urządzenia, a następnie na tej podstawie zmiany styleing:

@Component({ 
    selector:'my-component', 
    styles:[ 
    ` 
     :host{ 
      [theme="blue"]{ 

       change what ever you want : 

       h1{ 
       color:blue; 
       } 
      } 

     } 
    ` 
    ] 
})

, a następnie za pomocą tego komponentu będzie jak:

<my-component [attr.theme]='"blue"'></my-component> // would be blue theme 
    <my-component></my-component> // would be default

Źródło

2016-12-20 21:51:49 Milad

Myślę, że w przypadku, gdy chcesz, aby komponent zawsze wyglądał tak samo bez względu na to, co jest znacznie rzadsze niż chcesz być potrafi całkowicie zamieniać CSS przez zamianę pliku CSS (tak właśnie robi CSS). Myślę, że to naprawdę dziwaczna decyzja, aby priorytetowo traktować przypadki skrajne w normalnym użytkowaniu w świecie rzeczywistym. Problem z umieszczeniem wszystkiego w tagu head polega na tym, że nie będzie on aktualizowany w oparciu o styleUrl określone w komponentach znajdujących się na ekranie. Jeśli kiedykolwiek używałeś AngularJS w stylach kątowych, jest to bliższe tego, co mógłbym się spodziewać. –

Nie ma ojca, świat zmierza w kierunku komponentów, naprawdę musisz google zdefiniować komponent!Myślę, że chcesz JQuery, nie Angular2 – Milad

Myślę, że Angular 2 nie będzie zbyt przydatny, jeśli jedynymi osobami, które chcą z niego korzystać, są deweloperzy publikujący swoje komponenty. Filozofia CSS Zen Garden jest bardzo rozpowszechniona i nie bez powodu. –

Przejdź do podstawowego pliku Html (gdzie moduł główny, główna aplikacja jest wstrzykiwana) i połącz arkusze stylów CSS w sekcji nagłówka.

Pakiet internetowy nie uwzględni go w skompilowanym/połączonym pliku css, który jest wstrzykiwany na stronę. Plik css będzie nadal dołączany w czasie wykonywania w przeglądarce.

<html> 

<head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <title>dummy</title> 
    <meta name="viewport" content="width=device-width"> 

//was not injected/modified by webpack 
    <link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png"> 

//webpack's injected this below from other components's imported/inline css rules 
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>

Źródło

2016-12-15 23:04:43 deek

A jak by to działało, aby dostarczyć CSS do pojedynczego komponentu? –

zasady będą nadal ważne/działają ..... ale dostępne na całym świecie. Nie stanowi problemu, chyba że używasz nakładających się na siebie nazw klas css. – deek

Myślę, że prawdopodobnie zrobię dokładnie to. Pochodzę ze szkoły myślenia "Ogród Zen CSS", nie rozumiem całej filozofii CSS w Angular 2. –

Używam również kątowego-cli (v1.0.0-beta.22). Kiedy jestem gotowy, aby zbudować dla produkcji uruchomić następujące polecenie:

ng build -prod -aot

Generuje wszystkie moje pliki produkcyjne gotowe (dołączony, drzewa wstrząsnąć i minified etc) . Na szczególną uwagę zasługuje fakt, że wygeneruje dwie wersje arkuszy stylów.

Jedna JS:

styles.b2328beb0372c051d06d.bundle.js

I kolejna wersja jest zwykły css:

styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

biegnę trochę post-processing w css plik z gulp i użyj wersji css dla mojej kompilacji produkcyjnej. Jestem nie czy to samo dotyczy leniwego ładowania (gdzie cli będzie produkować różne porcje), ale działa na pewno, gdy leniwy ładunek nie jest używany (nie uruchomiłem jeszcze projektu gotowego do produkcji z leniwym Ładuję).

Próbowałem również budować z JIT kompilacji:

ng build -prod

produkowany również w wersji surowej/minified arkusza stylów CSS.

Teraz wiem na pewno folowing nie działa:

ng budować

To będzie produkować wszystkie css osadzony w pliku js, styles.bundle.js.

Ponieważ chcesz użyć surowego pliku css podczas rozwoju jedynym obejście można myślę, jest to, że prowadzony ng build -prod w celu uzyskania pliku css. Skopiuj/wklej to ręcznie do folderu zasobów. Uruchom plik "format", aby rozpakować plik. Następnie wykonaj normalną kompilację ze zmodyfikowanym plikiem index.html odwołującym się do surowego pliku css i usuwając odniesienie do skryptu styles.bundle.js. Nie ładne, ale może działać.

Źródło

2016-12-20 03:05:11 brando

Nie śledzę, jak to będzie zachowywać się kanciasto od wizyty w styleUrl i zasysania go jako JavaScript i sprawić, by tworzył zamiast niego tag stylu? –

Istnieje nowa wersja kąta-cli. Może rozwiązać ten problem: https://github.com/angular/angular-cli/pull/3511 – brando

-1

Put klasa wrapper w html example- <div class="component-1-wrapper"> all yout html here inside component-1-wrapper </div>
Struktura swojego sass (scss) w następujący sposób. Ponieważ wasze style są owinięte wewnątrz Component-1-wrapper, zatem będzie ona miała zastosowanie tylko do składnika-1 wrapperclass .component-1-wrapper{ // all the styles for component-1 here .class-hello{ // styles } }
można skompilować css z Sass i umieścić wszystkie CSS (oddzielone modułów) w folderze oddzielne. Rozpocznij nazwy plików autorem _, Sass może importować je:

można odwołać swoje style-main.scss w app.ts złożyć @component({ styleUrls:['styles/styles-main.scss']})
stylu arkusze będą być zorganizowany w ten sposób, a style poszczególnych komponentów zostaną zastosowane do konkretnego komponentu, ponieważ istnieje klasa wrapperów w html

Mam nadzieję, że to pomoże !!!!!!

Źródło

2016-12-21 17:48:43 shaunak1111

Z kątowym-CLI 1.6.5 można to zrobić:

ng serve --extract-css

będzie jeszcze cechy style-hermetyzacji, ale DevTools będzie teraz wskazać plik źródłowy komponent css.

Źródło

2018-02-23 14:11:42 nilsel

To może być komentarz. – Striped

Utrzymywanie CSS z JS w Angular 2/Angular-CLI

Odpowiedz

Powiązane problemy