5

在NativeScript應用程序中,我試圖應用一些將在應用程序中共享的全局樣式。NativeScript/Angular - 如何導入全局樣式?

這是我的結構:

- styles 
- partials 
    - _buttons.scss 
    - _exports.scss 

_buttons.scss

.flt-btn { 
    border-radius: 35px; 
} 

_exports.scss

@import '_buttons.scss'; 

app.css

@import './styles/partials/_exports.scss'; 

正如你所看到的,應適用於.flt-btn的風格,但他們沒有。

我使用的一個功能模塊,這就是延遲加載的類,login這樣的:

<Button class="flt-btn" text="A button"></Button> 

如果我把BTN風格直接app.css沒有它的工作原理任何進口,但由於這是一個css文件我不能在其中使用scss。所以我不確定這樣的進口是否會有效。

如何確保partials導入的樣式應用於整個應用程序?

編輯:

我發現this,其成功導入我自己的風格融app.android.cssapp.ios.css文件。但是,在我安裝了SASS之後,完成了這個操作後,當我在模擬器中運行它時,應用程序完全是空白的,無論是在android還是ios中。

我沒有得到任何錯誤,什麼都沒有。有沒有人成功地能夠像這樣工作?請讓我知道如何,你會得到回報。

編輯2:

它看起來像應用程序正在運行,因爲我可以成功登錄,app.component.ts的構造函數的東西,所以我猜的東西會導致網頁上的所有元素消失與新的樣式設置。

回答

2

我發現這個指南:https://docs.nativescript.org/ui/theme#sass-usage

這是正確的方式去這一點。這將爲android和ios創建一個scss/css文件,並創建一個_app-common.scss文件,您可以使用該文件將自定義樣式導入。這將被應用於android和ios css。

奇怪的是,組件scss的工作原理沒有像上面那樣安裝sass。但是在安裝sass之後,您不能再引用組件的styleUrls屬性中的scss文件,現在應該鏈接到css文件。爲什麼這是我一直無法弄清的,但我想這不是什麼大事,因爲它至少可以起作用。

由@tay華提供的答案是不正確,因爲它是指angular-cli而非nativescript-cli,所以如果你和我一樣,就死在這,這是你應該尋找答案。