Hola, tengo el siguiente error: Esta es la configuración que usé en el main.css: <code>&lt;@font-face { font-family: &#x27;Ubuntu&#x27;...

Gustavo Gonzalez Montero

Gustavo Gonzalez Montero

Pregunta
student
hace 4 años

Hola, tengo el siguiente error:

Captura de Pantalla 2021-06-26 a la(s) 10.54.31.png

Esta es la configuración que usé en el main.css:

<@font-face { font-family: 'Ubuntu'; src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'), url('../assets/fonts/ubuntu-regular.woff') format('woff'); font-weight: 400; font-style: normal; }>

Y este es mi config:

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const CopyPlugin = require('copy-webpack-plugin') module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', assetModuleFilename: 'assets/images/[hash][ext][query]' }, resolve: { extensions: ['.js'] }, module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.css|.styl$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader' ], }, { test: /\.png/, type: 'asset/resource' }, { test: /\.(woff|.woff2)$/, use: { loader: 'url-loader', options: { limit: 10000, mimetype: "application/font-woff", name: "[name].[ext]", outputPath: "./assets/fonts/", publicPath: "./assets/fonts/", esModule: false }, } } ] }, plugins: [ new HtmlWebpackPlugin({ inject: true, template: './public/index.html', filename: './index.html' }), new MiniCssExtractPlugin(), new CopyPlugin({ patterns: [ { from: path.resolve(__dirname, 'src', 'assets/images'), to: 'assets/images' } ] }) ] }

Estoy investigando si hay otro loader que se pueda usar, pero si alguien sabe de este error o le ha salido antes y sabe como solucionarlo le agradecería.

2 respuestas
para escribir tu comentario
    Johann Sebastian Pérez E

    Johann Sebastian Pérez E

    student
    hace 4 años

    Me ubiera quedado 3 horas buscando ese error. Me parece que la consola no da muchas pistas jejeje

    Gustavo Gonzalez Montero

    Gustavo Gonzalez Montero

    student
    hace 4 años

    Very big typo:

    Puse un ".woff2" en ves de "woff2" después del pipe:

    Antes:

    test: /\.(woff|.woff2)$/,

    Ahora:

    test: /\.(woff|woff2)$/,
Curso de Webpack [Empieza Gratis]

Curso de Webpack [Empieza Gratis]

Construye aplicaciones React usando Webpack. Aprende a configurar y optimizar tu entorno de desarrollo con loaders, compresión CSS y análisis de paquetes. Despliega tu proyecto fácilmente en producción y mejora el rendimiento.

Curso de Webpack [Empieza Gratis]
Curso de Webpack [Empieza Gratis]

Curso de Webpack [Empieza Gratis]

Construye aplicaciones React usando Webpack. Aprende a configurar y optimizar tu entorno de desarrollo con loaders, compresión CSS y análisis de paquetes. Despliega tu proyecto fácilmente en producción y mejora el rendimiento.