Laden von Schriftarten mit Webpack und font-face
Ich versuche, laden Sie eine schriftart in meine CSS-Datei mit @font-face
aber die Schrift nie geladen. Dies ist meine Verzeichnis Struktur.
Dann in webpack.config.js
ich habe den loader zu bekommen Schriftarten.
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
"./index.js"
],
output: {
path: __dirname+"/build",
filename: "main.js"
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.svg$/, loader: "raw" },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}
]
}
};
In meiner CSS-Datei habe ich dieses:
@font-face {
font-family: 'Darkenstone';
src: url('./Darkenstone.woff') format('woff');
}
body {
background-color: green;
font-size: 24px;
font-family: 'Darkenstone';
}
Schließlich rufe ich meine CSS-Datei in meine index.js
mit:
import './src/css/master.css';
Alles funktioniert, aber de Schrift nie geladen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nachdem versucht, eine Menge Sachen, die die nächsten loader aus der Arbeit. Anstelle von Datei-loader, den ich benutzt url-loader . Sie müssen die url-loader installiert.
Mit webpack 4 dies ist, was das Problem gelöst, für mich (diff):
Musste ich entfernen
svg-loader
undfile-loader
zu Gunsten vonurl-loader
Meine
app.scss
- Datei sieht wie folgt aus:Und in meinem
app.js
ich importierenapp.scss
:So, nach den änderungen, mein webpack config sieht wie folgt aus:
Versuchen Sie Ihr loader zu
{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=[name].[ext]'}
und fügen Sie
publicPath: 'build/'
zu Ihremoutput
- Taste.publicPath: 'build/'
zuoutput
. Sie öffnen kann index.html und finden Sie die Stil-Tags und sehen, was die url der schriftart ist, sollte esbuild/Darkenstone.woff
path: __dirname + '/build'
undpublicPath: 'build/'
. Bitte fügen Sie den Inhaltindex.html
zu Ihrer Frage.