0
742
ViewsCargue fuentes con Webpack y font-face
Estoy tratando de cargar una fuente en mi archivo CSS usando @font-face pero la fuente nunca se carga. Esta es mi estructura de directorios.
Luego, en webpack.config.js tengo el cargador para obtener fuentes.
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]'} ] } };Dentro de mi archivo CSS tengo esto:
@font-face { font-family: 'Darkenstone'; src: url('./Darkenstone.woff') format('woff'); } body { background-color: green; font-size: 24px; font-family: 'Darkenstone'; } Finalmente, estoy llamando a mi archivo CSS en mi index.js con:
import './src/css/master.css';Todo funciona pero la fuente nunca carga.
3 answers
Answer question0
Después de probar muchas cosas, el siguiente cargador hizo el trabajo. En lugar de cargador de archivos, usé url-loader. Necesitas url-loader instalado.
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }0
Con webpack 4 esto es lo que resolvió el problema para mí (diff):
{ test: /\.svg$/, use: ['svg-loader'] }, { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, use: ['file-loader'] } { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] } Tuve que eliminar svg-loader y file-loader a favor de url-loader
Mi archivo app.scss se ve así:
$fa-font-path: '~font-awesome/fonts'; @import '~font-awesome/scss/font-awesome'; $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; @import '~bootstrap-sass/assets/stylesheets/bootstrap'; Y en mi app.js importo app.scss :
import './app.scss';Entonces, después de los cambios, la configuración de mi paquete web se ve así:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpackConfig = require('./webpack.config'); module.exports = { entry: { app: './client/app/app.js' }, devtool: 'source-map', mode: 'development', plugins: [ new HtmlWebpackPlugin({ title: 'Development', template: 'client/index.html' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] } ] } };0
De acuerdo con la Documentación de Webpack , debe actualizar su webpack.config.js para manejar archivos de fuentes. Ver el último cargador, es decir
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', } Incluiremos todo tipo de formato de archivo para webpack. El archivo webpack.config.js final se verá así.
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, }; Luego, deberá importar las fuentes a su archivo de entrada. En este caso ./src/index.js . Con el cargador configurado y las fuentes en su lugar, puede incorporarlas a través de una declaración @font-face . La directiva de url(...) será recogida por webpack tal como lo fue con la imagen.