自托管字体在开发服务器上不起作用答案

【问题标题】：Self hosted font does not work on dev server自托管字体在开发服务器上不起作用
【发布时间】：2021-11-24 05:54:16
【问题描述】：

我遇到了一个问题，我们需要删除 html 文件中指向外部资源的链接（如 google api 字体和材料图标）。所以我自己托管它，在本地主机上接收到网络字体并且工作正常，但在生产台上，网络中甚至没有请求获取这种字体。似乎在生产台上它不会尝试插入字体或导入 css在生产中不起作用。这是我的 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';
  }

这是 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>

也许问题出在 webpack 中，所以这是我的样式配置：

module.exports = function () {
  return {
    module: {
      rules: [
        {
          test: /\.(css|scss)$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        }
      ]
    }
  };
};

和常见的规则：

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]'
        }
      ]
    }
  };
};

我猜路径是正确的，因为它在本地主机上工作。

请帮帮我，我花了好几个小时才弄清楚出了什么问题...(

【问题讨论】：

标签： css reactjs webpack font-face webpack-dev-server

【解决方案1】：

终于解决了这个问题！:) 但也许对于遇到同样问题的人会有所帮助，因为我花了一整天的时间来解决这个问题。

显然 package.json 文件中的 "sideEffects": false 存在问题，您必须删除它，或者写入 "sideEffects": ["*.css"]。 More information here

【讨论】：