新しいフォントを組み込んで参照する適切な方法はありますか？

Question

ReactQLファイル構造では、カスタムフォントを保存するための推奨場所はありますか？そのフォントをどのように参照しますか？

例えば、私はフォントを./staticに追加しようとしましたが、styles.global.cssでそれを参照していますが、そのような運はありません。

推奨事項次の3つの方法でフォント（または画像）を参照することができ

Answer 1

：

1.

あなたのJSコード内からあなたはES6モジュールの構文を使用して、ちょうど他のコードのようなフォント/ IMGをインポートすることができますこの場合

// imports will start looking in your project root 
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font 

、​​はWebPACKので処理し、得られたdistフォルダにダンプのフォントファイルパスのストリングに等しくなります。それはあなたのために自動的に行われます。フォントや画像を特別な場所に置く必要はありません。

通常、完全なファイルパスが必要な場合は、Reactコンポーネントでこれを参照できます。文字列がReactQL Webサーバーからパブリックにアクセスできるようになります：WebPACKのは、それを処理し、そして得られたJavascriptのバンドルに定数をダンプした後、この場合

// The regular, pre-processed PNG image 
import logoImage from 'src/images/logo.png'; 

// A component that uses the image 
const ShowLogo =() => (
    <img src={logoImage} /> 
); 

、logoImageは/assets/img/logo.d41d8cd98f00b204e980.pngとして羽目になるかもしれません。

慣例として、静的資産を呼び出し元のReactコンポーネントと同じフォルダに保存することをお勧めします。複数のコンポーネントが同じアセットを指している場合は、​​またはsrc/imagesのような賢明な名前を選択するか、ちょうど/imagesのようにしてください。あなたのCSS内から

2は同じのいずれかの.css|sass|scss|less|または*.global.バージョンインサイド

、あなたは定期的に@importの構文を使用してインポートすることができます。

styles.global.cssを

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

html { 
    padding: 0; 
    border: 0; 
    font-family: 'Starjout'; 
    font-size: 16px; 
} 

フォントが正しく解決されるようにするには、CSSファイルに相対的にインポートします。この場合、Starjout.ttfはstyles.global.cssと同じフォルダにあります。であるとして、あなたは/staticに入れ

3.

/static内にあるものは、得られdist/publicフォルダに配置されます。これはWebpackによって処理されません。つまり、画像は本番では圧縮されず、.gzまたは.brのバージョンは作成されません。それらは単にコピーされます。

ファイルを参照するには、CSS内の完全なURLを使用します。相対パスを使用すると、WebpackはソースCSSに関連するファイルを見つけることが予想され、動作しません。同様に、/staticにファイルを入れると、元の形式でファイルがコピーされるため、JS経由でのインポートは正しく機能しません。

基本的なルールは、「ソース」とみなしたいスタティックファイルです。src/など、プロジェクトルートのどこにでも置くことができます。処理せずにコピーするか、動的にインポートすることができるものはすべて/static