Nativescript 6 eckig, wie dynamisch laden SCSS-Datei in die Seite

Ich habe ein Projekt, dass ich zu kämpfen, zu arbeiten, wie Sie es Tat, bevor mit Webpack, Nativescript 5.x, und SASS.

Vor {N} 6 raus kam, SASS plugin kompiliert .scss-Dateien in .css-Dateien neben Ihren scss-Pendants.

Ich war mit dieser Funktion dynamisch geladen, die device-Größe-spezifische css in meine Seiten auf der Grundlage der durch die folgende Funktion aufgerufen ngAfterViewInit().

Jetzt, da {N}6 verwendet, sass-loader statt nativscript-dev-sass sind keine css Dateien erstellt, die alle meine css-Regeln gehen in bundle.js und ich weiß nicht, wie man die CSS, die ich brauche, um es auf die Seite.

Im Grunde ist diese.Seite.addCssFile() wurde unbrauchbar gemacht.

Weiß jemand, wie man Zugriff auf die raw-css in bundle.js oder wie konfiguriert mein webpack bauen zu emittieren css-Dateien?

Im Grunde will ich nur zu emittieren .css-Dateien .scss-Dateien in /app/styles/, diese in meine bauen und dann rufen Sie Sie wie ich in der Funktion unten.

Vorschläge für andere Mittel, um mein Ziel erreichen, sind willkommen. Ich habe versucht die mini-css-Auszug-plugin, um css-Dateien erstellen, aber ich bin nicht sehr vertraut mit Webpack.

constructor(protected page: Page, protected  routerExtensions : RouterExtensions ){

...

private setupScreenSize(){
  let screen = platform.screen.mainScreen;
  let orient  = orientation.getOrientation();
  console.log(orient);
  console.log(screen.heightDIPs);
  console.log(screen.widthDIPs);


  console.log("Current directory: " + __dirname)

  if( screen.widthDIPs <= 320 || screen.heightDIPs <= 320){
    console.log("small screen");
    this.screenSize = "screen-small"
    this.page.addCssFile("~/styles/device-small.css")
  } else if ( screen.widthDIPs <= 480 || screen.heightDIPs <= 480)  {
    console.log("medium screen");
    this.screenSize = "screen-medium"
    this.page.addCssFile("~/styles/device-medium.css")
  } else if ( screen.widthDIPs <= 600 || screen.heightDIPs <= 600)  {
    console.log("large screen");
    this.screenSize = "screen-large"
    this.page.addCssFile("~/styles/device-large.css")
  } else {
    console.log("extra large screen");
    this.screenSize = "screen-xlarge"
    this.page.addCssFile("~/styles/device-extra-large.css")
  }

  ...
}
0
2019-09-17 21:00:41
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an