Verhindern, dass Angular CLI weniger Dateien kompiliert

Ich versuche, ein dynamisches Thema auf meiner Site anzuwenden, indem ich weniger Variablen verwende. Hier ist ein vereinfachtes Szenario:Verhindern, dass Angular CLI weniger Dateien kompiliert

Datei: site.less

@primary-color: 'red'

Datei: foobar.component.less

@import '../site.less'; 
.some-element { 
    background-color: @primary-color; 
}

Dies funktioniert gut für die erste Seite zu laden und die Hintergrundfarbe ist rot . Aber jetzt möchte ich eine Dropdown-Farbauswahl mit mehreren Farboptionen. Wenn der Benutzer grün statt rot auswählt, möchte ich die weniger Funktion less.modifyVars({'@primary-color', 'green'}) verwenden, die zu keiner Änderung führt. Dies liegt daran, dass angular cli den css weniger vorkompiliert, so dass der Browser niemals die weniger Dateien sehen kann.

Also ich denke, wenn Angular die weniger Dateien nicht in CSS kompiliert, dann wird der Browser die Änderungen übernehmen, wenn ModifyVars aufgerufen wird.

Wie sage ich Angular nicht kompilieren weniger in CSS?

Quelle

2017-12-12 heilch

Sie müssen wahrscheinlich den Befehl [eject] (https://github.com/angular/angular-cli/wiki/eject) des Clients verwenden und konfigurieren, dass Webpack nicht weniger kompiliert wird. – LLai

Ich bin mit diesem Befehl nicht ganz vertraut, würde das bedeuten, dass ich Angular CLI nicht mehr für Builds, sondern für natives Webpack verwenden würde? – heilch

Richtig, es gibt Ihnen die volle Kontrolle über den Build – LLai

Sie können angular clis ng eject Befehl verwenden. Dadurch wird eine Webpack-Konfigurationsdatei ausgegeben, die Ihnen vollständige Kontrolle über die Build-Befehle gibt.

Seitennotiz: Ich glaube nicht, dass es unmöglich ist, ng eject zurückzukehren, aber ich habe gelesen, dass es nicht immer ein einfacher Prozess ist. Vor allem, wenn mehrere Versionen mit den Funktionen zum Hinzufügen/Ändern von Winkeln zu den Build-Befehlen übergeben wurden.

Quelle

2017-12-12 23:06:01 LLai

Ich habe mich entschieden, einen anderen Ansatz insgesamt zu nehmen, seit ich mehrere Quellen gesehen habe (einschließlich weniger selbst) erwähnen, nicht im Browser zu kompilieren. Aber in Bezug auf diese Frage ist dies die richtige Antwort. – heilch

@heilch Ja, ich würde definitiv einen anderen Ansatz empfehlen. Dies gerät in das Unkraut des Build-Prozesses. – LLai

Warum ändern Sie nicht Ihren Variablennamen in weniger Datei?

Quelle

2017-12-12 22:28:16

Die CLI kompiliert die weniger auf dem Server, bevor es an den Browser gelangt. Es ersetzt alle Instanzen der Variablen durch den Hexadezimalwert direkt in der CSS, der für den Browser bereitgestellt wird. Aus der Sicht des Browsers gab es nie eine Variable zum Umbenennen – heilch

Auf welchem Weg verbinden Sie Ihre Site.less mit Angular? –

In der Datei .angular-cli.json gibt es ein Konfigurations-Array für "Styles", ich habe die weniger Datei dort aufgenommen. Die Komponente weniger Datei wird nur während der Kompilierung von dem, was ich sagen kann – heilch

Verhindern, dass Angular CLI weniger Dateien kompiliert

Antwort

Verwandte Themen