Importing Boostrap.sass

1

I installed Bootstrap SASS in my project through NPM. After installation I tried to import the Bootstrap files into my CSS folder by creating an SASS file and gave the command

@import ../bower_components/bootstrap-sass/assets/stylesheets/bootstrap

I then updated by giving the command gulp in NPM, but it is not importing the files needed for the folder.

I'm following the steps in this tutorial exactly the same link

gulpfile.js file :

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

// task para sass
gulp.task('sass', function(){
     return sass('sass/**/*.sass').pipe(gulp.dest('css'))
});


// task para watch
gulp.task('watch', function(){
     gulp.watch('sass/**/*.sass', ['sass'])      
});

// task default 
gulp.task('default', function(){

});

'use strict';

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

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

gulp.task('sass:watch', function () {
    gulp.watch('sass/**/*.sass', ['sass']);
});
    
asked by anonymous 21.05.2017 / 20:10

1 answer

1

The error is in your gulpfile.js file. When running gulp , the default command of this file will be executed, however, in its case, it is blank, that is, nothing will be done. For other commands to be executed from this, you must do:

gulp.task('default', ['sass']);

In this way, every time the command default is executed, sass will also be.

Another thing that got strange in your file is the duplication of commands. The sass command was set twice and the watch and sass:watch commands are the same. If you remove this redundancy, your file will look like:

'use strict';

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

gulp.task('default', ['sass']);

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

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

gulp.task('sass:watch', function () {
    gulp.watch('sass/**/*.sass', ['sass']);
});
    
21.05.2017 / 21:38