我试图引入Sass引导源(.SCSS),进行一些自定义(通过另一个.SCSS)并吐出CSS文件。

我一直在尝试使用Gulp做到这一点,这是VS2019使用gulp-sass。我遵循了许多教程,并提出了以下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文件,而不仅仅是添加导入。

谁能指出我正确的方向?

最佳答案

在对Internet进行了许多拖曳之后,我发现这是预期的行为,并且取决于我引用源bootstrap.scss文件的方式。

简而言之,我使用Web路径来引用它,这具有将导入语句添加到生成的.css文件中的效果。如果我更改对这样的文件系统路径的引用:

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


它的功能与我希望的一样,生成的.css文件包含bootstrap.scss中的所有定义。

关于css - 如何获得gulp-sass来编译引导CSS定义,而不仅仅是输出import语句?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59721403/

10-13 02:49
查看更多