Unterstützt der Angular 2 Ahead-of-Time-Compiler SASS-Stylesheets?

Ich möchte einen weiteren Versuch machen, Angular 2 Ahead-of-Time-Kompilierung zu verwenden.Unterstützt der Angular 2 Ahead-of-Time-Compiler SASS-Stylesheets?

Dies erfordert ein erhebliches Refactoring meinerseits, da mein aktuelles Setup einen benutzerdefinierten Buildprozess verwendet, der geändert werden muss.

Bevor ich beginne, muss ich wissen: wenn ich zu externen .scss Dateien in den styleUrls Metadaten verbinde, funktioniert der AoT Compiler?

@Component({ 
    ... 
    styleUrls:['./app.component.scss'], 
}) 
export class AppComponent {}

Oder sollte ich zuerst stattdessen alle meine Stile .css und Link zur CSS-Stylesheets konvertieren?

The readme diskutiert dies nicht.

Quelle

2016-10-02 BeetleJuice

Vielleicht brauchen Sie es nicht mehr, aber ich habe eine Lösung für Ihr Problem geschrieben. Prost! –

SASS-Dateien (.scss Dateien) werden vom Ahead-Compiler nicht erfolgreich verarbeitet (ngc). Ich habe meine Sheets .css erste

Quelle

2016-10-04 18:53:11 BeetleJuice

Das habe ich auch herausgefunden (dass ngc Probleme mit der Verarbeitung von Sass-Dateien hat), aber ich frage mich, wie man diese Sass-Dateien in CSS-Dateien umwandelt und trotzdem die Struktur des Projekts behält (dh Webpack soll/kann nicht) in diesem Schritt verwendet werden). Wie hast du das gemacht und/oder was hast du benutzt? –

@ChristopheVidal Die Vorlage jeder Komponente befindet sich in einer '.scss'-Datei im selben Verzeichnis. Die 'styleURLs' der Komponente beziehen sich auf' .css'. Während der Build-Schritte wird die Sass-Datei in CSS konvertiert und die CSS wird inline. Um dies zu erreichen, benutze ich das [angular-seed] (https://github.com/mgechev/angular-seed/wiki/Working-with-SASS) Setup. – BeetleJuice

@BeetleJuiceDo weißt du, wie man das mit angular cli erledigt? –

@BeetleJuice Antwort zu konvertieren ist nicht ganz korrekt (oder nicht mehr richtig) das einzige, was Sie tun müssen, ist so in Ihrem tun einen Lader für sass/SCSS Dateien zur Verfügung zu stellen webpack.config.js: tun

{ test: /\.sass$/, loaders: ['raw-loader', 'sass-loader']}

und danach können Sie Ihre sass Dateien direkt in Ihrem Komponenten enthalten:

styleUrls: ['app.style.sass']

um dies zu tun Sass-Loader installieren :

npm install sass-loader node-sass webpack --save-dev

Quelle

2017-01-17 17:34:29

Wie verhält es sich mit der Kompilierung vor der Zeit? Dies ist einfach Webpack – Dethariel

Wenn Sie away über Webpack-Plugin (AotPlugin) tun, können Sie einfach Webpack verwenden, um Sass-Dateien zu unterstützen. –

Hallo DaveDo hast du ein Beispiel dafür – LintonB

Unterstützt der Angular 2 Ahead-of-Time-Compiler SASS-Stylesheets?

Antwort

Verwandte Themen