• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

211
Views
Font Awesome cargando como cajas con less.js y webpack

Recientemente modifiqué mis módulos webpack en mi proyecto React/Electron.js para compilar menos archivos usando less-loader, css-loader y MiniCssExtractPlugin.loader en lugar del style-loader ya que no hay una ventana definida durante parte de la compilación, pero ahora los iconos de fuentes impresionantes se muestran como cuadros y no estoy seguro de por qué.

Los increíbles íconos de fuentes aparecían bien cuando tenía un cargador de estilos en lugar de MiniCssExtractPlugin.loader, pero solo hice este cambio para cargar archivos .less y nada más, así que no estoy seguro de por qué esto se vio afectado.

Intenté agregar .fa, .far, .fas { font-family: FontAwesome !important; } a mi archivo index.less como se sugiere aquí , pero esto no ayudó en absoluto.

También intenté agregar font-awesome-loader , pero parece tener una dependencia de sass-loader@* , que no estoy usando.

¿Qué está causando que Font Awesome se cargue con el cargador de estilo pero no con MiniCssExtractPlugin.loader? He incluido mis módulos de paquete web y mi importación de fuentes impresionantes a continuación:

 module.exports = { module: {[ { test: /\.node$/, use: 'node-loader', }, { test: /\.(m?js|node)$/, parser: {amd: false}, use: { loader: '@marshallofsound/webpack-asset-relocator-loader', options: { outputAssetBase: 'native_modules', }, }, }, { test: /\.tsx?$/, exclude: /(node_modules|\.webpack)/, use: { loader: 'ts-loader', options: { transpileOnly: true, }, }, }, { test: /\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}], }, { test: /\.(woff(2)?|ttf|eot|svg|jpg|png|ico|icns)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]', publicPath: '..', }, }, ], }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}], exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/], }, ]}, plugins: [ new ForkTsCheckerWebpackPlugin(), new MiniCssExtractPlugin(), ], resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.css'], }, };
 /* index.tsx */ import './index.less'; import '@fortawesome/fontawesome-free/css/all.css'; ...
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Todo se solucionó cuando cambié index.tsx para import '@fortawesome/fontawesome-free/js/all.js'

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error