Self hosted font does not work on dev server - css

Question

I'm having an issue, we needed to get rid of links to external resources in html file(as google api font and material icons). So I self hosted it, on localhost in network font is received and works fine, but on production stand there's even no requests in network to get this font.It seems that on production stand it doesn't event try to plug font or import css does not work in production.
Here's my index.css
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
font-family: 'Roboto';
}
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
This is App.tsx:
import * as React from 'react';
import { Provider } from 'react-redux';
import { hot } from 'react-hot-loader/root';
import CssBaseline from '#material-ui/core/CssBaseline'; // CSS Reset
import { ThemeProvider } from '#material-ui/core/styles';
import NotifierProvider from 'components/NotifierProvider';
import { MuiPickersUtilsProvider } from '#material-ui/pickers';
import DateFnsUtils from '#date-io/date-fns';
import ruLocale from 'date-fns/locale/ru';
import { Router } from 'react-router';
import { initAxios } from 'security';
import store from '../../store';
import MainRouting from '../MainRouting';
import theme from './theme';
import history from '../../historyRouting';
import GlobalCss from '../GlobalCss';
import '../../assets/font/index.css';
// инициализируем аксиос с авторизацией
initAxios();
export const App: React.FC = () => (
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ruLocale}>
<CssBaseline />
<Router history={history}>
<ThemeProvider theme={theme}>
<GlobalCss />
<Provider store={store}>
<NotifierProvider>
<MainRouting />
</NotifierProvider>
</Provider>
</ThemeProvider>
</Router>
</MuiPickersUtilsProvider>
);
export default hot(App);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
and maybe issue is in webpack, so here's my styles config:
module.exports = function () {
return {
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
}
};
};
and coommon rules:
module.exports = function () {
return {
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(pdf|jpg|png|gif|ico|)$/,
exclude: /font/,
use: [
{
loader: 'url-loader?limit=20480&name=assets/img/[name]-[hash].[ext]',
options: {
esModule: false,
}
}
]
},
{
test: /\.svg$/,
use: ['#svgr/webpack', 'svg-url-loader'],
},
{
test: /\.(ttf|eot|woff|woff2)$/,
exclude: /img/,
loader: 'file-loader?name=assets/font/[name].[ext]'
}
]
}
};
};
I guess paths are correct as it work on localhost.
please, help me, I spent hours to figure what's wrong...(

Answer 1

Finally fixed this problem!:) But maybe for someone who has the same issue it'll be helpful, because I spent whole day to figure this out.
Apparently there's a problem with "sideEffects": false in package.json file and you have to either delete this, either write "sideEffects": ["*.css"]. More information here