I try to use sourcemaps for my scss files. But when I inspect an element in the browser, the sourcemap points to a wrong file. I can't find what is causing this issue.
gulp.task('sass', function(){
return gulp.src('./themes/custom/' + project + '/scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
bourbon,
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/font-awesome/scss'
],
style: 'compressed',
quiet: true,
}).on('error', function (err) {
sass.logError(err);
this.emit('end');
}))
.pipe(concat('style.css'))
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./themes/custom/' + project + '/css'))
});
Related
I'm having an issue combining the CSS from the Foundation Sites NPM and my own SCSS. For some reason the generated CSS file includes all of the Foundation CSS but won't add anything from my SASS files.
Here is my CSS task (with variables):
var CSS_SOURCE = 'assets/src/scss';
var CSS_DEST = 'assets/dist/css';
var CSS_OUTPUT_FILE = 'main.css';
gulp.task('css', function() {
gulp.src([
'node_modules/foundation-sites/dist/css/foundation.css',
CSS_SOURCE + 'main.scss'
])
.pipe(plumber({
errorHandler: function(error) {
console.log(error.message);
}}))
.pipe(concat(CSS_OUTPUT_FILE))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(browserSync.reload({ stream:true }))
});
Here is my main.scss file:
#import "custom-settings";
#import "typography";
#import "header";
#import "navigation";
#import "buttons";
#import "main-content";
#import "footer";
Gulp isn't logging any errors. No matter what I put in my individual SASS files, none of it gets added to the bottom of the /dist/main.css file. Can anyone shed some light on this?
Found the answer, I needed to include the path for the imports to work in the main.scss file. I also needed to add an extra forward slash in gulp.src. Here is the working task:
gulp.task('css', function() {
gulp.src([
'node_modules/foundation-sites/dist/css/foundation.css',
CSS_SOURCE + '/main.scss'
])
.pipe(plumber({
errorHandler: function(error) {
console.log(error.message);
}}))
.pipe(sass({
includePaths: [
CSS_SOURCE
]
}))
.pipe(concat(CSS_OUTPUT_FILE))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(browserSync.reload({ stream:true }))
});
I'm beginner with Foundation and Sass. I understand slowly how it works. The workflow seems great, but here's my "issue".
When my SCSS is compiled, my CSS minifies as soon as I save my .scss file.
I've tried to turn off the Gulp task, but it didn't do anything.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe($.sass({
includePaths: sassPaths,
// outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Any ideas?
From looking at your task their shouldn't be any part of it that is minifying your css. A couple of things you could try:
1) Try outputStyle: 'expanded'
2) Try compiling your sass without including any of the bower sass files, as one of them could already be minified (although unlikely). Or even just check those manually.
3) Or finally try this configuration:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src',
'scss/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sassPaths)
.pipe($.sass({
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
I try to add a second sass 'cycle' to my ionic project. Here is the relevant part of my gulpfile.js
var paths = {
sass: ['./scss/**/*.scss'],
themesass: ['./www/data/theme/css/**/*.scss']
};
gulp.task('default', ['sass','themesass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('themesass', function(done) {
gulp.src('./www/data/theme/css/style.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/data/theme/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/data/theme/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.themesass, ['themesass']);
});
On changing style.css I get following output in terminal:
File changed: www/data/theme/css/style.scss
[12:07:03] Starting 'themesass'...
[12:07:03] Finished 'themesass' after 14 ms
CSS changed: www/data/theme/css/style.css
CSS changed: www/data/theme/css/style.min.css
Both files (style.css and style.min.css) stay empty though. What am I missing?
Is it possible to have a scss file converted to an expanded and compressed css file? What I'd like to have is a bootstrap.scss file saved as boostrap.css and bootstrap.min.css
I currently have the following code that will covert the scss file to a compressed css file that has the same name.
var config = {
sassPath: './static/scss',
bowerDir: './static/bower_components'
};
gulp.task('sass', function(){
return sass(config.sassPath, {style: 'compressed', loadPath: [
'./static/scss',
config.bowerDir + '/bootstrap-sass/assets/stylesheets'
]})
.on('error', function(err){
console.error('Error!', err.message);
})
.pipe(gulp.dest('./static/css'));
});
I'm also using gulp-ruby-sass | https://stackoverflow.com/tags/gulp-ruby-sass/info
gulp.task('app-css', function() {
return sass('bower_components/sass-smacss/sass/dashboard.scss', {
// noCache: true,
style: 'compressed'
})
.pipe(sourcemaps.init())
.on('error', errorlog)
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('app/assets/css/'))
});
Just replace compressed with expanded above.
I'm trying to get the above combination working but am unable to. I have tried the following combinations:
1)
var sass = require('gulp-ruby-sass');
gulp.task('sass',function () {
gulp.src('_scss/main.scss')
.pipe(sass({
loadPath: ['_scss'],
style: "compressed",
trace: true,
sourcemap: true,
sourcemapPath: "../../../_scss",
noCache: true,
require: ['sass-media_query_combiner']
}))
2)
var sass = require('gulp-ruby-sass');
var cmq = require('gulp-combine-media-queries');
var cssmin = require('gulp-cssmin');
gulp.task('sass',function () {
gulp.src('_scss/main.scss')
.pipe(sass({
loadPath: ['_scss'],
style: "nested",
trace: true,
sourcemap: true,
sourcemapPath: "../../../_scss",
noCache: true
}))
.pipe(cmq())
.pipe(cssmin())
3) I also tried using gulp-sass + gulp-combine-media-queries + gulp-minify-css + gulp-sourcemaps
Before moving to Gulp, I was using this build command in ST2:
"cmd": ["sass", "--update", "${project_path}/web/_scss/main.scss:${project_path}/web/resources/css/main.css", "--stop-on-error", "--no-cache", "--style", "compressed","-r","sass-media_query_combiner"],
link to question on reddit, also sass-media_query_combiner and gulp-ruby-sass
".pipe(cmq())" should be before ".pipe(gulp.dest())"
gulp.task('sass', function() {
return gulp.src("./*.scss")
.pipe(sass())
.pipe(cmq())
.pipe(gulp.dest(".css/"))
.pipe(reload({stream: true}))
});