Importing the Boostrap.Sass

Asked

Viewed 78 times

1

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

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

Then updated giving the command gulp in NPM, but not importing the necessary files into the folder.

I am following the steps of this tutorial exactly the same https://www.youtube.com/watch?v=ITrndc4xFn0&t=1577s

Filing cabinet gulpfile.js:

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']);
});
css bootstrap sass npm

  • Already made sure that Bootstrap SASS was successfully installed? What is the output of the command gulp? You have Gulp installed?

  • Yes it is installed, it is installed in the dependencies of my project Gulp also when I put the Gulp command appears the message: [15:29:26] Using gulpfile ~ Desktop Alacarte gulpfile.js [15:29:27] Starting 'default'... [15:29:27] Finished 'default' after 271 μs

  • Then edit the question and add the file content gulpfile.js.

  • how do I upload the gulpfile file

  • except the characters

  • Post to ideone.com and paste the link here that I edit the question for you.

  • sorry I couldn’t use the indeone I’ve never used before

  • I created a link in the Dropbox with the file https://www.dropbox.com/s/gdcvt1jv102urtt/gulpfile.js?dl=0

  • Your command default is blank, so nothing runs. Perhaps it is interesting to read as the gulp works. To test, try executing the command gulp sass.

  • In this case I would put Gulp.task('default', Function(){ Gulp.Sass

  • Tested the command gulp sass? If you confirm that it has worked I will respond with the appropriate guidelines.

  • worked the plugins file was created, it was because I made the wrong call ? that before had not worked out right ?

Show 7 more comments

1 answer

1

The error is in your file gulpfile.js. When executing gulp, the command default of this file will be executed, however, in your 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']);

This way, every time I command default be executed, sass will also be.

Another thing that got weird in your file is the duplication of commands. The command sass has been set twice and commands watch and sass:watch 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']);
});

  • got it now, I realized I was duplicating the files I’ll tidy up now, thank you very much Anderson for the help and for the learning I really need to practice more Gulp.

Browser other questions tagged css bootstrap sass npm

You are not signed in. Login or sign up in order to post.