Sass-Datei wird nicht in Winkelkomponente geladen

Ich habe gemeinsame Druckfunktionalität in Winkel 2 entwickelt. Ich habe einen Code wie folgt geschrieben.Sass-Datei wird nicht in Winkelkomponente geladen

this.printconent = document.getElementById("eq-result-print").innerHTML; 
     if (window) { 
      if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 

       var popup = window.open('', '_blank', 
        'width=600,scrollbars=yes,menubar=no,toolbar=no,' 
        + 'location=no,status=no,titlebar=no'); 

       popup.window.focus(); 

       popup.document.write('<html><head> ' + 
        '<link type="text/css" rel="stylesheet" href="node_modules/bootstrap/scss/bootstrap.min.css" media="screen,print"/>' + 
        '<link type="text/x-sass" rel="stylesheet" href="../../styles.scss" media="screen,print"/>' + 


        + '</head><body onload="window.print()"><div class="reward-body">' 
        + this.printconent + '</div></html>'); 
       popup.onbeforeunload = function (event) { 
        popup.close(); 
        return '.\n'; 
       }; 
       popup.onabort = function (event) { 
        popup.document.close(); 
        popup.close(); 
       } 
      } else { 
       var popup = window.open('', '_blank', 'width=800,menubar=no,toolbar=no,' 
        + 'location=no,status=no,titlebar=no'); 
       popup.document.open(); 
       popup.document.write('<html><head>' + 
        '<link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" media="all"/>' + 
        '<link type="text/x-sass" href="../../styles.scss" />' + 

        + '</head><body onload="window.print()">' + this.printconent + '</html>'); 
       popup.document.close(); 
      } 

      popup.document.close(); 

}

Hier Lade ich .scss Datei in Link-Tag. aber nicht diese Datei in der Komponente laden. Bitte korrigieren Sie mich. wo ich falsch gemacht habe. und ich habe auch versucht, mit styleUrls zu laden: ['../../ sass/styles.scss'] in @Component Decorator, aber diesmal bekomme ich "TypeError: cssText.replace ist keine Funktion" .. so Wie scss-Datei in der Komponente in der richtigen Weise laden?

Quelle

2017-07-24 Chintada Muralidhar

Zuerst fügen Sie Ihre scss-Dateien zum Ordner "Assets" hinzu. Es empfiehlt sich, einen Ordner "Styles" hinzuzufügen.

dann stellen Sie sicher, in Ihrer Angular-CLI-Datei Ihre StyleExt -Eigenschaft auf scss eingestellt ist, wenn Sie dies ändern, müssen Sie den Server stoppen und neu starten.

Dann können Sie Ihre SCSS Dateien in Ihren Komponenten SCSS oder die allgemeinen SCSS Dateien verwenden, indem Sie den Import auf

Beispiel, wenn Sie die Ordner styles erstellt:

@import "~assets/styles/_variables.scss";

oder:

@import "~assets/_myscssfile.scss";

Quelle

2017-07-24 13:06:12

Sass-Datei wird nicht in Winkelkomponente geladen

Antwort

Verwandte Themen