我刚刚开始使用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
// ...
<h1 class="text-custom-color">Header1</h1> <-- Just a test
<p>Lorem ipsum dolor</p> <-- rendered as Segoe UI
<div class="text-monospace">Lorem ipsum dolor</div> <-- rendered as consolas
<script src="bundle.js"></script>
</body>
</html>
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');
}