在升级webpack 2-> 4之后，字体不再在网站上呈现（使用文件加载器，我也尝试了url-loader，但无济于事）。构建工作正常，.styl中的@ font-face加载也不会引起任何问题。当我在开发工具中查看“网络”选项卡时，我也看不到字体-在旧版本的应用程序中，我看到了它们。
以下是配置：
webpack.config.js
const path = require('path');
const nib = require('nib');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
require('dotenv').config();
process.traceDeprecation = true;
const config = {
entry: ['./src/main.js','./src/styles/scss/app.scss'],output: {
path: __dirname,publicPath: '/',filename: 'bundle.js',},module: {
rules: [
{
exclude: /node_modules/,loader: 'babel-loader',options: {
babelrc: false,presets: [
"@babel/preset-env","@babel/preset-react"
]
}
},{
test: /\.scss$/,use: [
'style-loader','css-loader',{
loader: 'postcss-loader',options: {
plugins: () => [autoprefixer()],{
loader: 'sass-loader',options: {
includePaths: ['./node_modules'],],{
test: /\.(woff(2)?|otf|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,use: [
{
loader: 'file-loader',options: {
name: '[path][name].[ext]',}
}
]
},{
test: /react-sortable-tree\/style\.css$/,include: /node_modules/,loader: 'style-loader!css-loader',{
test: /\.css$/,exclude: /node_modules/,loader:
'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]',{
test: /\.styl$/,{
loader: 'css-loader?camelCase&modules&localIdentName=[local]',{
loader: 'stylus-loader',options: {
use: [nib()],import: ['~nib/lib/nib/index.styl'],{
test: /\.(jpe?g|png)$/i,loader: 'file-loader?name=[path][name].[ext]',resolve: {
modules: ['src','node_modules'],extensions: ['.js','.jsx','.styl'],enforceExtension: false,devtool: 'eval-source-map',devserver: {
historyApiFallback: true,contentBase: './',headers: {
'access-control-allow-origin': '*','access-Control-Allow-Headers': 'X-Requested-With',port: 8082,setup: app => {
require('dotenv').config();
},plugins: [
new webpack.DefinePlugin({
'process.env': {
BASE_URL: JSON.stringify(process.env.BASE_URL),BASE_API_URL: JSON.stringify(process.env.BASE_API_URL),TEMPLATING_URL: JSON.stringify(process.env.TEMPLATING_URL),USDA_API_KEY: JSON.stringify(process.env.USDA_API_KEY),NODE_ENV: JSON.stringify(process.env.NODE_ENV),QUICKBOOKS_CLIENT_ID: JSON.stringify(process.env.QUICKBOOKS_CLIENT_ID),}),};
module.exports = config;
base.styl（将被加载，因为应用了它的样式）
/***** FONTS *****/
@font-face {
font-family: 'BrandonText-Bold';
src: url("../../static/fonts/BrandonText/BrandonText-Bold.otf") format('opentype');
/*font-weight: 600;*/
}
@font-face {
font-family: 'BrandonText-Medium';
src: url("../../static/fonts/BrandonText/BrandonText-Medium.otf") format('opentype');
/*font-weight: 500;*/
}
@font-face {
font-family: 'BrandonText';
src: url("../../static/fonts/BrandonText/BrandonText-Regular.otf") format('opentype');
/*font-weight: 400;*/
}
@font-face {
font-family: 'BrandonText-Regular';
src: url("../../static/fonts/BrandonText/BrandonText-Regular.otf") format('opentype');
/*font-weight: 400;*/
}
@font-face {
font-family: 'BrandonText-Light';
src: url("../../static/fonts/BrandonText/BrandonText-Light.otf") format('opentype');
/*font-weight: 300;*/
}
@font-face {
font-family: 'Gellix-Bold';
src: url("../../static/fonts/Gellix/Gellix-Bold.otf") format('opentype');
}
@font-face {
font-family: 'Gellix-BoldItalic';
src: url("../../static/fonts/Gellix/Gellix-BoldItalic.otf") format('opentype');
}
@font-face {
font-family: 'Gellix-MediumItalic';
src: url("../../static/fonts/Gellix/Gellix-MediumItalic.otf") format('opentype');
}
@font-face {
font-family: 'Gellix-Medium';
src: url("../../static/fonts/Gellix/Gellix-Medium.otf") format('opentype');
}
@font-face {
font-family: 'Gellix-Regular';
src: url("../../static/fonts/Gellix/Gellix-Regular.otf") format('opentype');
}
@font-face {
font-family: 'Gellix-RegularItalic';
src: url("../../static/fonts/Gellix/Gellix-RegularItalic.otf") format('opentype');
}
@font-face {
font-family: 'SFProText';
src: url("../../static/fonts/SFPro/SF-Pro-Text-Regular.otf") format('opentype');
}
@font-face {
font-family: 'SFProText-Regular';
src: url("../../static/fonts/SFPro/SF-Pro-Text-Regular.otf") format('opentype');
}
@font-face {
font-family: 'SFProText-Medium';
src: url("../../static/fonts/SFPro/SF-Pro-Text-Medium.otf") format('opentype');
}
@font-face {
font-family: 'SFProText-Bold';
src: url("../../static/fonts/SFPro/SF-Pro-Text-Bold.otf") format('opentype');
}
half-pixel-bottom(color)
background-image: linear-gradient(to bottom,white 0%,white 50%,color 50%)
background-size: 100% 1px;
background-repeat: no-repeat
body {
overflow-x: auto;
}
* {
margin: 0px;
padding: 0px;
font-family: 'BrandonText';
}
*:focus {
outline: none !important;
}
.do-not-display {
display: none !important;
}
.container {
width: 100%;
height: 100%
min-width: 1100px;
margin: 0px;
padding: 0px;
}
.page-item {
width: 960px;
margin: 0px auto;
}
.half-pixel-bottom
height: 1px
width: 100%
position: relative
half-pixel-bottom(#d8d8d8)
.dash-underlined {
border-bottom: 1px dashed #bdc0c9;
}
.omg-green {
color: #0eaf27;
}
.omg-green-link {
color: #0eaf27;
font-family: 'BrandonText-Medium';
text-decoration: underline;
}
.omg-green-link:hover {
color: #0eaf27;
text-decoration: underline;
}
.bold {
font-family: 'BrandonText-Bold';
}
.header-wrapper
position fixed
top 0
background-color #fff
width 100%
z-index 9999
.navbar
box-shadow 0px 0px 5px 0px #ccc
.content-wrapper
margin-top 80px
.scrollable
&::-webkit-scrollbar
-webkit-appearance: none
width: 6px
&::-webkit-scrollbar-thumb
border-radius: 4px
background-color: rgba(146,146,0.25)
-webkit-box-shadow: 0 0 1px rgba(255,255,.5)
以下是构建正常工作的方式：
