CODEWITHSUNDEEP
visual-studioasp.net-coregulpgulp-sass
haosmark
haosmark

Reputation: 1127

Updated Bootstrap + SASS in ASP.NET CORE 2, with Gulp?

I'm trying to add Bootstrap with SASS capability to my ASP.NET Core 2 project, but have difficulty accomplishing this. I used NPM to install Bootstrap into node_modules, then got Gulp to move minified css and js dependencies into my wwwroot directory. Now I want to have a SASS file where I override Bootstrap's defaults to fit my needs, and this is where I'm stuck. Here's my Gulp code, 'compile-sass' is not working. I get missing binding error.

const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');

const root = "./wwwroot/";
const bootstrapStyles = "node_modules/bootstrap/dist/css/bootstrap.min.css";
const bootstrapSass = "node_modules/bootstrap/scss/bootstrap.scss";
const bootstrapScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
];

gulp.task('default', ['build-all']);
gulp.task('build-all', ['build-css', 'build-js']);

gulp.task('build-css', () => {
    return gulp.src(bootstrapStyles)
        .pipe(gulp.dest('./wwwroot/'));
});

gulp.task('build-js', () => {
    return gulp.src(bootstrapScripts)
        .pipe(concat('bootstrap.min.js'))
        .pipe(gulp.dest(root));
});

gulp.task('compile-sass', () => {
    gulp.src(bootstrapSass)
        .pipe(sass())
        .pipe(gulp.dest(root));
});

// watch bootstrap-overrides.scss for changes and recompile SASS
gulp.task('watch-sass', () => {
    gulp.watch(root + 'bootstrap-overrides.scss', ['compile-sass']);
});

This is the exact excerpt of the problem:

    gulp.task('compile-sass', () => {
    gulp.src(bootstrapSass)
        .pipe(sass())
        .pipe(gulp.dest(root));
});

compile error that I'm getting

Project structure

Edit: Solved the build error by running the following command: npm rebuild node-sass My bootstrap-overrides.scss edits are not changing variable values. How do I correctly compile SASS?

Upvotes: 3

Views: 2263

Answers (1)

haosmark
haosmark

Reputation: 1127

Solved it.

const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const rename = require('gulp-rename');

const root = "./wwwroot/";
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
];

const vendorStyles = "node_modules/bootstrap/scss/bootstrap.scss";
const customerStyleOverrides = root + "scss/*.scss";

gulp.task('default', ['build-vendor']);

gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);

// merge javascripts into a single vendor.min.js file and save it to wwwroot
gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest(root));
});

// compile bootstrap and save as vendor.min.css to wwwroot
gulp.task('build-vendor-css', () => {
    return gulp.src([vendorStyles, customerStyleOverrides])
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(rename('vendor.min.css'))
        .pipe(gulp.dest(root));
});

// watch for changes to styles.css and recompile bootstrap on styles change
gulp.task('watch-sass', () => {
    gulp.watch(root + "scss/styles.scss", ['build-vendor-css']);
});

Upvotes: 1

Related Questions