React, webpack and font-awesome #601

New Issue

fergalmoran · 2025-08-09T17:16:55Z

fergalmoran commented

2025-08-09 17:16:55 +00:00

Originally created by @QuantumHive on 7/7/2017

Hi,

I'm trying to migrate my existing react application into an aspnet core mvc app. I've started with Cory House's starter-kit.
I've struggled really hard to get the app working, but I seem to be missing some pieces to this great puzzle.

My current migrated webpack.config.dev.babel.js looks like this:

import path from "path";
import webpack from "webpack";
import autoprefixer from "autoprefixer";

export default {
    resolve: {
        extensions: ['*', '.js', '.jsx', '.json']
    },

    context: path.resolve(__dirname, "App"),
    entry: { 'main': "./index.js" },
    target: 'web',
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "[name].js",
        publicPath: "./dist/"
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("development"),
            __DEV__: true
        }),

        new webpack.LoaderOptionsPlugin({
            options: {
                sassLoader: {
                    includePaths: [path.resolve(__dirname, "App", "scss")]
                },
                context: "/dist/",
                postcss: () => [autoprefixer]
            }
        })
    ],

    module: {
        rules: [
              {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
              {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
              {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
              {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
              {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
              {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
              {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
              {test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', "postcss-loader", 'sass-loader?sourceMap']}
        ]
    }
};

And in my index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import configureStore from './store/configureStore';

import '../node_modules/bootstrap/scss/bootstrap.scss';
import '../node_modules/font-awesome/scss/font-awesome.scss';
import './styles/app.scss';

import Root from './components/Root';

import moment from 'moment';

moment.locale('nl');

const store = configureStore();

ReactDOM.render(
    <Root store={store} />,
    document.getElementById('app')
);

And in Shared\_Layout.cshtml and Home\Index.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>RowinPT App</title>
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

<div id="app"></div>

@section scripts {
    <script type="text/javascript" src="~/dist/main.js" asp-append-version="false"></script>    
}

I've tried to strip the webpack config file to a bare minimum, without all the great features like HRM.
Currently the app is running except for one thing: font-awesome. I'm getting squares instead of the expected icons:

What I don't understand is that the bootstrap is actually working, but the font icons are not.
This is how my dist looks like:

And this is the css my browser is showing when I inspect the font-awesome element:

Why am I getting the squares and not the fonts?

*Originally created by @QuantumHive on 7/7/2017* Hi, I'm trying to migrate my [existing react application](https://github.com/QuantumHive/rowinpt-react) into an `aspnet core mvc` app. I've started with [Cory House's starter-kit](https://github.com/coryhouse/react-slingshot). I've struggled really hard to get the app working, but I seem to be missing some pieces to this great puzzle. My current migrated `webpack.config.dev.babel.js` looks like this: ``` import path from "path"; import webpack from "webpack"; import autoprefixer from "autoprefixer"; export default { resolve: { extensions: ['*', '.js', '.jsx', '.json'] }, context: path.resolve(__dirname, "App"), entry: { 'main': "./index.js" }, target: 'web', output: { path: path.resolve(__dirname, "./wwwroot/dist"), filename: "[name].js", publicPath: "./dist/" }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify("development"), __DEV__: true }), new webpack.LoaderOptionsPlugin({ options: { sassLoader: { includePaths: [path.resolve(__dirname, "App", "scss")] }, context: "/dist/", postcss: () => [autoprefixer] } }) ], module: { rules: [ {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']}, {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'}, {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}, {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'}, {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'}, {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}, {test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', "postcss-loader", 'sass-loader?sourceMap']} ] } }; ``` And in my `index.js`: ``` import React from 'react'; import ReactDOM from 'react-dom'; import configureStore from './store/configureStore'; import '../node_modules/bootstrap/scss/bootstrap.scss'; import '../node_modules/font-awesome/scss/font-awesome.scss'; import './styles/app.scss'; import Root from './components/Root'; import moment from 'moment'; moment.locale('nl'); const store = configureStore(); ReactDOM.render( <Root store={store} />, document.getElementById('app') ); ``` And in `Shared\_Layout.cshtml` and `Home\Index.cshtml`: ``` <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>RowinPT App</title> </head> <body> @RenderBody() @RenderSection("scripts", required: false) </body> </html> ``` ``` <div id="app"></div> @section scripts { <script type="text/javascript" src="~/dist/main.js" asp-append-version="false"></script> } ``` I've tried to strip the webpack config file to a bare minimum, without all the great features like HRM. Currently the app is running except for one thing: `font-awesome`. I'm getting squares instead of the expected icons: ![image](https://user-images.githubusercontent.com/2554952/27979863-6daca548-6379-11e7-9b97-95c41420269b.png) What I don't understand is that the bootstrap is actually working, but the font icons are not. This is how my dist looks like: ![image](https://user-images.githubusercontent.com/2554952/27979895-a173dc2a-6379-11e7-9a8a-5fa480730326.png) And this is the css my browser is showing when I inspect the font-awesome element: ![image](https://user-images.githubusercontent.com/2554952/27979932-f28bf278-6379-11e7-9915-1473f5965484.png) ![image](https://user-images.githubusercontent.com/2554952/27979939-018c1c58-637a-11e7-9222-492fb5fd3d51.png) Why am I getting the squares and not the fonts?

fergalmoran closed this issue

2025-08-09 17:16:55 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#601