Answer the question
In order to leave comments, you need to log in
Why doesn't compiling scss to gulp with @import work?
Hello, please tell me how to set up compilation of scss files in gulp. Here is my gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
path = require('path'),
minifyCss = require('gulp-minify-css'),
rename = require("gulp-rename"),
autoprefixer = require('gulp-autoprefixer'),
bower = require('gulp-bower'),
connect = require('gulp-connect'),
mainBowerFiles = require('gulp-main-bower-files'),
wiredep = require('wiredep').stream,
bulkSass = require('gulp-sass-bulk-import'),
jade = require('gulp-jade');
/**************************connect********************/
gulp.task('connect', function() {
connect.server({
root: 'prj',
livereload: true
});
});
/**************************bower******************/
gulp.task('mainfiles', function() {
return gulp.src('./bower.json')
.pipe(mainBowerFiles())
.pipe(gulp.dest('prj/output/js/bower'));
});
/**************************less**********************/
gulp.task('sass', function () {
return gulp.src('prj/input/sass/*.scss')
.pipe(bulkSass())
.pipe(sass(
{includePaths: ['prj/input/sass/bootstrap/scss']}
))
// .pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 15 versions'],
cascade: false
}))
.pipe(gulp.dest('prj/input/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss())
.pipe(gulp.dest('prj/output/css'))
.pipe(connect.reload());
});
/****************************scripts******************/
gulp.task('js', function () {
return gulp.src('prj/input/js/*.js')
.pipe(gulp.dest('prj/output/js'))
.pipe(connect.reload());
});
/**
* jade
*/
gulp.task('jade', function(){
return gulp.src('prj/input/**/index.jade')
.pipe(jade({pretty: true}))
.pipe(wiredep({
directory: './bower_components',
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest('prj/output/html'))
.pipe(connect.reload());
});
/***************************watch*********************/
gulp.task('watch', function() {
gulp.watch('prj/input/sass/*.scss', ['sass'])
gulp.watch('prj/input/js/*.js', ['js'])
gulp.watch('prj/input/**/*.jade',['jade']);
});
gulp.task('default',['connect','sass','watch','js','jade']);
@import 'variables.scss'
. Then such error is produced here Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question