在Gulp 4中没有显示引导图标

Question

我试图使用新的引导图标npm软件包与gulp 4，最新的版本，在我的项目，一切都安装良好，工作良好。

当我在index.html文件中声明图标时，遇到的问题如下：

<i class="bi bi-alarm"></i>

图标没有显示，我认为问题来自网络字体。

如果有人能帮忙的话，我是新来的！

这里是我的gulpfile.js文件：

"use strict";

const { src, dest, watch, series, parallel } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// FILE PATHS
const files = {
    scssPath: "src/assets/scss/app.scss",
    jsPath: "src/assets/js/app.js",
};

// COMPILE SCSS INTO CSS
function compileSCSS() {
    return src(files.scssPath, { sourcemaps: true })
        .pipe(sass().on("error", sass.logError))
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(dest("public/assets/css", { sourcemaps: "." }));
}

// COPY CUSTOM JS
function compileJS() {
    return src(files.jsPath, { sourcemaps: true })
        .pipe(terser())
        .pipe(dest("public/assets/js", { sourcemaps: "." }));
}

// BROWSER SYNC
function browserSyncInit(cb) {
    browsersync.init({
        server: {
            baseDir: ".",
        },
    });
    cb();
}

function browsersyncReload(cb) {
    browsersync.reload();
    cb();
}

// WATCH FILES
function watchFiles() {
    watch("*.html", browsersyncReload);
    watch([files.scssPath, files.jsPath], series(compileSCSS, compileJS, browsersyncReload));
}

exports.default = series(parallel(compileSCSS, compileJS), browserSyncInit, watchFiles);

这里是我的src/assets/scss/app.scss文件：

@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons";

这里是我的文件结构：

my-project/
├── src/assets/scss
│   └── app.scss
├── src/assets/js
│   └── app.js
├── public/assets
│   └── css/
│   └── js/
└── node_modules/
└── index.html
└── gulpfile.js

Answer 1

引导图标使用网络字体，但是您只是导入了SCSS，所以它不能正常工作。让我们创建一个Gulp任务，将字体复制到您的dest。

吞咽任务建议：

function copyBootstrapFonts() {
  return gulp.src('path-to-bootstrap-icons/fonts')
    .pipe(gulp.dest('path-to-your-dest/fonts'));
}

或者您可以使用CDN作为一种简单的方法。