2017-07-24 63 views
0

我設計了角度爲2的常用打印功能。我寫了如下代碼。sass文件未在角度組件中加載

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(); 

} 

這裏我正在加載鏈接標記中的.scss文件。但不在組件中加載此文件。請糾正我。我做錯了。也試圖加載通過使用styleUrls:['../../ sass/styles.scss']在@Component裝飾,但這次我得到「TypeError:cssText.replace不是一個函數」..所以如何以適當的方式加載組件中的scss文件?

回答

0

首先,您將scss文件添加到資產文件夾中,最好添加一個樣式文件夾。

然後確保在您的angular-cli文件中您的styleExt屬性設置爲scss,如果您更改了此設置,則需要停止服務器並重新啓動它。

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

或:

然後,你可以,如果你創建的樣式文件中加入進口頂部

例如使用SCSS文件在你的組件SCSS或一般SCSS文件

@import "~assets/_myscssfile.scss";