Cargue fuentes con Webpack y font-face

Esta noticia ha sido aprobado por nuestros especialistas así aseguramos la veracidad de esta noticia.

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.

eot

Con webpack 4 esto es lo que resolvió el problema para mí (diff):

       
         test: /.svg$/,
         use: ['svg-loader']
       ,
       woff
        test: /.(png

tuve que quitar svg-loader y file-loader a favor de url-loader

Mi app.scss archivo 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 el 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: [
      c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      ,
      ttf
    ]
  
;

Intente cambiar su cargador a

test: /.(eot

y añadir publicPath: 'build/' para usted output key.

Reseñas y calificaciones del artículo

---

---

Utiliza Nuestro Buscador