如何让 gulp-sass 编译 bootstrap CSS 定义而不只是输出导入语句？

Question

我正在尝试引入 Sass bootstrap 源 (.SCSS)，进行一些自定义（通过另一个 .SCSS）并吐出输出一个 CSS 文件。

我一直在尝试使用 Gulp 来执行此操作，这是使用 gulp-sass 的 VS2019。我遵循了许多教程并提出了以下 gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');


gulp.task('sass', function () {
    return gulp.src('./Main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

在我的 Main.css 中，我有以下内容：

$theme-colors: ( "primary": #fd7e14 );

@import "//lib/bootstrap-4.4.1/scss/bootstrap";

body {
    color: #5CFF54;
    background: rgb(92,18,18);
    height: 400vh;
}

但是，正在生成的文件包含以下内容：

@import "//lib/bootstrap-4.4.1/scss/bootstrap";
body {
  color: #5CFF54;
  background: #5c1212;
  height: 400vh; }

我期待它能将所有单独的样式拉入生成的 CSS 文件，而不仅仅是添加导入。

谁能给我指出正确的方向？

Answer 1

在网上大量搜索后，我发现这是预期的行为，并且取决于我引用源 bootstrap.scss 文件的方式。

简而言之，我用网络路径引用它，这具有向生成的 .css 文件添加导入语句的效果。如果我更改对文件系统路径的引用，例如：

@import "../lib/bootstrap-4.4.1/scss/bootstrap";

它的功能如我所愿，生成的 .css 文件包含 bootstrap.scss.

中的所有定义

如何让 gulp-sass 编译 bootstrap CSS 定义而不只是输出导入语句？

How can I get gulp-sass to compile bootstrap CSS definitions rather than just output the import statement?

css

sass

gulp

bootstrap-4