我试图引入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/