我刚刚开始使用webpack，并且想捆绑bootstrap 4并为其添加自定义字体。

不幸的是，我的字体堆栈总是退回到Segoe UI（我在Windows上）。我不知道我在做什么错。 Webpack似乎包含该字体，但是浏览器无法正确呈现它。

Webpack输出

C:\Temp\bs-webpack> npm run build
// ...
Entrypoint main [big] = bundle.js
[0] ./src/app.js 144 bytes {0} [built]
[4] (webpack)/buildin/global.js 472 bytes {0} [built]
[5] ./src/scss/_custom.scss 512 bytes {0} [built]
[6] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js!./src/scss/_custom.scss 158 KiB {0} [built]
[9] ./src/fonts/SourceSansPro-Regular.ttf 82 bytes {0} [built]
+ 5 hidden modules
// ..


dist / index.html

// ...


Header1

package.json

{
"name": "bs-webpack","version": "1.0.0","description": "","private": true,"scripts": {
"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"autoprefixer": "^9.7.2","css-loader": "^3.2.0","file-loader": "^4.3.0","node-sass": "^4.13.0","postcss-loader": "^3.0.0","sass-loader": "^8.0.0","style-loader": "^1.0.0","webpack": "^4.41.2","webpack-cli": "^3.3.10"
},"dependencies": {
"bootstrap": "^4.3.1","jquery": "^3.4.1","popper.js": "^1.16.0"
}
}


app.js

import 'bootstrap';
import './scss/_custom.scss';
import './fonts/SourceSansPro-Regular.ttf';


scss / _custom.scss

$font-family-sans-serif: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !default;
$font-family-monospace: "Source Code Pro",SFMono-Regular,Menlo,Monaco,consolas,"Liberation Mono","Courier New",monospace !default;
$font-family-base: $font-family-sans-serif !default;
$body-bg: white;
$body-color: #111;
$theme-colors: (
"primary": #0074d9,"danger": #ff4136,"custom-color": #900 // just a test to see if I can access the bootstrap classes
);
@import "../../node_modules/bootstrap/scss/bootstrap";


webpack.config.js

const path = require('path');
module.exports = {
entry: './src/app.js',output: {
filename: 'bundle.js',path: path.resolve(__dirname,'dist')
},module: {
rules: [
{
test: /\.(scss)$/,use: [
{ loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'postcss-loader',options: { plugins: function () { return [require('autoprefixer')]; } } },{ loader: 'sass-loader' }
]
},{
test: /\.(woff|woff2|eot|ttf|otf)$/,use: [
'file-loader'
]
}
]
}
}


在我的@font-face顶部放几个_custom.scss使其生效。另外，我还不得不在format(truetype)上使用format(ttf)。

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'Source Code Pro';
src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
}