如何在導入的sass文件中使用本地webfont？

我創建使用create-react-app一個反應項目，並正與該文件夾結構工作：如何在導入的sass文件中使用本地webfont？

在Menu.scss，我導入使用@import '../../Global/myfont';。

在myfont.scss，我包括字體：

@font-face { 
    font-family: 'myfont'; 
    src: url('./fonts/myfont.ttf'); 
    ... 
    font-weight: normal; 
    font-style: normal; 
}

我得到「錯誤：模塊未找到」。如果爲了測試，我將路徑更改爲src: url('../../Global/fonts/myfont.ttf');，一切正常。

有沒有一種方法可以設置URL路徑，因此無論從哪裏導入都可以工作？

如果你已經註冊它'myfont.scss'（假設這是裝在你的WebPack /其他方式），如果你只是使用'font-family：myfont;'，它不會在'Menu.scss'上工作嗎？ –

不，myfont不是任何地方導入..我導入scss文件在我的.js模塊文件中，我不完全理解如何簡單的sass（_partials編譯成主要的CSS，並編譯的CSS添加到HTML）與sass反應結構的一部分。這是我的第一個測試項目:-) –

如果你沒有文件打包程序，那麼從導入的每個scss文件將有不同的路徑，因爲它位於項目結構的不同位置。例如，如果你有一個在'index.js'加載的scss，那麼它可以加載其他的scss文件，這些文件將使用我上面寫的規則。 –

我建議你製作一個「base」scss文件，在其中寫入/導入字體，圖標和其他網站範圍內的組件，如頁眉，頁腳等。然後，將該base.scss文件導入到每個頁面的CSS。

base.scss：

$font-path: "../../Global/fonts" !default; 
@font-face{ 
    src: url('#{$font-path}/myfont.ttf'); 
    ... 
} 
...

而且在每個頁面上，添加：

@import "base;

2016-12-31 14:51:06

如果我從一個地方將兩個目錄從src導入base.scss，那麼你寫它的方式只能幫助我。如果我在Components/Menu/MenuButton中有一個scss文件，它會再次打破。 –

但是，如果我可以做到這一點，那麼你必須指定字體路徑，無論我包含全局scss，嗯... –

根據您的基本和字體文件的位置，更改$ font-path。例如，如果base.scss位於Global文件夾中，則應該使其成爲：$ font-path：「./fonts」！default; –

回答