包含自定义字体类型的webpack和bootstrap 4不起作用

问题描述 投票:0回答:1

我刚刚开始使用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'
                ]
            }
        ]
    }
}
javascript node.js webpack bootstrap-4 webfonts
1个回答
0
投票

在我的@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');
}
© www.soinside.com 2019 - 2024. All rights reserved.