Benutzerdefinierte Schriftart nicht geladen mit Webpack/Sass

Question

Wir haben ein großes Projekt, wo wir versuchen, ITCSS-Muster zu implementieren (was gut funktioniert) und fügen Sie eine benutzerdefinierte Symbolschrift von unseren Graphisten erstellt hinzufügen.

Hier ist die Ordnerstruktur (nicht erschöpfende Aufzählung):

. 
├── build 
│ └── webpack.config.js 
└── src 
    ├── components       # Using React 
    │ ├── test.jsx 
    │ └── test.scss 
    └── styles 
     ├── _objects       # Components style reusable 
     │ ├── _all.scss 
     │ └── table.scss 
     ├── _settings      # Global variables 
     │ ├── _all.scss 
     │ ├── _custom-icons.scss   # Define icon font (see below) 
     │ ├── _custom-icons-variables.scss # Define icon codes 
     │ ├── _colors.scss     # Define colors 
     │ ├── _predefined-colors.scss  # Define brand colors 
     │ └── _theme.scss     # Define specific theme 
     ├── _tools       # Mixins/helpers 
     │ ├── _all.scss 
     │ ├── _animation.scss 
     │ ├── _breakpoints.scss 
     │ └── _transition.scss 
     ├── _wins       # Overrides 
     │ ├── _all.scss 
     │ ├── _display.scss 
     │ ├── _position.scss 
     │ └── _text.scss 
     ├── assets 
     │ └── fonts 
     │  ├── custom-icons.eot 
     │  ├── custom-icons.svg 
     │  ├── custom-icons.ttf 
     │  └── custom-icons.woff 
     ├── _base.scss      # HTML Selectors 
     ├── _generic.scss     # Reset (normalize) 
     └── main.scss      # Loads everything 

OK, das ist eine ziemlich schwere Dateistruktur, aber es macht den Job in Bezug auf was wir erreichen wollen!

Wir starteten unsere App mit dem react-redux-starter-kit von davezuko. Wir haben die webpack-Konfigurationsdatei an unsere Bedürfnisse angepasst, aber den Style-Teil nicht geändert, so dass Sie sich auf die beziehen können.

Jetzt sind hier, um unsere Dateien:

_custom-icons-variables.scss

$fontPath: "./assets/fonts" !default; 

$aw-happy: "\e9df"; 
$aw-smile: "\e9e1"; 
$aw-tongue: "\e9e3"; 
$aw-sad: "\e9e5"; 
$aw-wink: "\e9e7"; 
$aw-grin: "\e9e9"; 
$aw-cool: "\e9eb"; 
$aw-angry: "\e9ed"; 
… 

_custom-icons.scss

Das benutzerdefinierte Symbol Schriftart auf Semantic setzt -UI-Schriftart-Symbol-Styling.

@import "custom-icons-variables"; 

$fontName: 'custom-icons'; 

$fallbackSRC: url("#{$fontPath}/#{$fontName}.eot"); 
$src: 
    url("#{$fontPath}/#{$fontName}.eot?#iefix") format('embedded-opentype'), 
    url("#{$fontPath}/#{$fontName}.woff") format('woff'), 
    url("#{$fontPath}/#{$fontName}.ttf") format('truetype'), 
    url("#{$fontPath}/#{$fontName}.svg?##{$fontName}") format('svg') 
; 

@font-face { 
    font-family: $fontName; 
    src: $fallbackSRC; 
    src: $src; 
    font-weight: normal; 
    font-style: normal; 
} 

i.icon.aw { 
    font-family: $fontName !important; 
} 

.aw-happy { 
    &:before { 
    content: $aw-happy; 
    } 
} 
.aw-smile { 
    &:before { 
    content: $aw-smile; 
    } 
} 
.aw-tongue { 
    &:before { 
    content: $aw-tongue; 
    } 
} 
.aw-sad { 
    &:before { 
    content: $aw-sad; 
    } 
} 
.aw-wink { 
    &:before { 
    content: $aw-wink; 
    } 
} 
.aw-grin { 
    &:before { 
    content: $aw-grin; 
    } 
} 
.aw-cool { 
    &:before { 
    content: $aw-cool; 
    } 
} 
.aw-angry { 
    &:before { 
    content: $aw-angry; 
    } 
} 
… 

main.scss

Alles hier in global ist so vermeiden wir webpack einen Hash-Zugabe und ermöglichen uns den direkten Klassennamen in unserer Komponenten (siehe Beispiel unten) zu verwenden.

:global { 
    @import "_settings/all"; 
    @import "_settings/custom-icons"; 
    @import "_tools/all"; 
    @import "generic"; 
    @import "base"; 
    @import "_objects/all"; 
    @import "_wins/all"; 
} 

test.jsx

Hier können Sie uns sowohl global verwenden sehen und scoped Stile.

import React, { Component } from 'react' 

import s from './test.scss' 

export default class Test extends Component { 
    render() { 
    return (
     <div className={s['test']}> 
     <i className='icon aw aw-happy'></i> 
     <h1>Test</h1> 
     </div> 
    ) 
    } 
} 

test.scss

Ja, für jede Komponente, die unsere Marke Farben verwendet, müssen wir die Sass-Datei erneut zu importieren ... Ich weiß nicht, ob es eine schlechte Sache ist, aber es funktioniert:

)

@import "src/styles/_settings/all"; 

.test { 
    background: $brown; 
    color: $white_smoke; 
} 

---

Nun, da Hintergrund gesetzt, hier ist das Problem:

Das aw-happy Symbol als Quadrat dargestellt wird (wie wenn Sie Ihre Schriftart nicht geladen ist ...) und ich kann nicht gelingt es, funktioniert habe ich versucht, alles, was ich konnte nach Tonnen von Ressourcen Surfen im Internet:/

Wir verwenden Semantic-UI das ist gebaut und dann mit webpack gebündelt, so dass ich versuchte, die @font-face Regel auf die semantic.min.css hinzuzufügen und bewegt auch Schriftarten-Dateien semantische Ordner:

semantic.min.css

@font-face { 
    font-family: 'custom-icons'; 
    src: url(themes/default/assets/fonts/custom-icons.eot); 
    src: url(themes/default/assets/fonts/custom-icons.eot?#iefix) format('embedded-opentype'), 
    url(themes/default/assets/fonts/custom-icons.woff) format('woff'), 
    url(themes/default/assets/fonts/custom-icons.ttf) format('truetype'), 
    url(themes/default/assets/fonts/custom-icons.svg?#custom-icons) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
// Semantic stuff… 

und ... Es wo rks!

Ich frage mich, ob ich diese benutzerdefinierte Schriftart besser bauen und bedienen sollte, wie wir es mit Semantik tun, aber es ist ärgerlich, den ganzen Prozess von den globalen Styles zu entfernen.

Haben Sie eine Idee, wie Sie dies lösen können, indem Sie alle Sass/Webpack-Sachen behalten?

Answer 1

Hier ist die Lösung, die ich durch das Surfen geschlossene Bug reagieren-redux-Starter-Kit Projekt gefunden habe:

Ich zog die @font-face Definition main.scss vor :global:

main.scss

$font-path: 'styles/assets/fonts'; 
$font-name: 'custom-icons'; 

$fallback-src: url("#{$font-path}/#{$font-name}.eot"); 
$src: 
    url("#{$font-path}/#{$font-name}.eot?#iefix") format('embedded-opentype'), 
    url("#{$font-path}/#{$font-name}.woff") format('woff'), 
    url("#{$font-path}/#{$font-name}.ttf") format('truetype'), 
    url("#{$font-path}/#{$font-name}.svg?##{$font-name}") format('svg') 
; 

@font-face { 
    font-family: $font-name; 
    src: $fallback-src; 
    src: $src; 
    font-weight: normal; 
    font-style: normal; 
} 

Es funktionierte auch wenn ich $font-path-../styles/assets/fonts definiert, aber nicht zu ./assets/fonts.

Es ist ein bekannter Fehler, der referenced at GitHub ist, aber davezuko graben nicht in dieser Zeit.