I recently embarked on a project where I wanted to utilize the Sass bootstrap source (.SCSS), apply some customizations (through another .SCSS file), and generate a CSS output.
To achieve this, I decided to employ Gulp in VS2019 with gulp-sass. After going through various tutorials, I created the following 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'));
});
Within my Main.css file, I included the following code snippet:
$theme-colors: ( "primary": #fd7e14 );
@import "//lib/bootstrap-4.4.1/scss/bootstrap";
body {
color: #5CFF54;
background: rgb(92,18,18);
height: 400vh;
}
However, upon generating the file, it seemed to only include the import statement rather than incorporating all the individual styles as expected:
@import "//lib/bootstrap-4.4.1/scss/bootstrap";
body {
color: #5CFF54;
background: #5c1212;
height: 400vh; }
This outcome left me puzzled and seeking guidance on how to properly merge all styles into the final CSS output file. Any suggestions or pointers would be greatly appreciated!