将 Bootstrap4 与 gulp 一起使用的正确方法答案

【问题标题】：Correct way to use Bootstrap4 with gulp将 Bootstrap4 与 gulp 一起使用的正确方法
【发布时间】：2018-08-14 16:19:05
【问题描述】：

我只是想知道，将 Bootstrap 4 scss 与 gulp 一起使用的正确方法是什么？

这是我的 gulpfile.js：

gulp.task('sass', function(){
    return gulp.src([
        'scss/app.scss'
    ])
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(CleanCSS())
        .pipe(gulp.dest('css'))
});

那么 app.scss 看起来是这样的：

// Import full bs4 after custom overriden variables
@import "node_modules/bootstrap/scss/bootstrap";

bootstrap.scss 本身会导入所有 bs 模块。

这是“正确的方法”吗？

或者我应该编译 bs scss 文件而不将其导入我的 app.scss：

gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss'])
        .pipe(sass())
        .pipe(gulp.dest("css"))
});

【问题讨论】：

标签： twitter-bootstrap gulp bootstrap-4

【解决方案1】：

我也对这个问题感兴趣……

我将资源（CSS、javascript、图像、字体）从依赖项复制到我的应用或主题资源目录中，然后从那里构建。

我的理由是任何链接到 css 文件的图像或字体都可能破坏相对路径的 b/c。

仍然不确定这是否是“正确”的做法......过去它对我有用。

【讨论】：

您可以使用变量覆盖路径，无需复制它们。

【解决方案2】：

我发现最好的方法是将您的资产复制到 node_modules 之外，因为后端开发人员根本不会费心安装 nodejs。

【讨论】：