My Gulp SCSS Compiler below works fine with single files, and when including files into a single output e.g. styles.scss & _base.scss which would output styles.css.
However if I was two output files e.g. styles.css & base.css upon making the scss file 'base.scss' it complies it to the dest still with the .scss extension. Its not till I actually rerun the compile task till I get a base.css file as well as the base.scss file in the dest folder...
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss', { style: 'expanded' })
.pipe(plugins.sass())
.pipe(gulp.dest('public_html/css'));
});
Im using node-sass. I do not want to use ruby-sass
Output in public_html/css/
What I'm getting
css/
- base.scss
- base.css
- style.css
what I want to get
css/
- base.css
- style.css
You are putting { style: 'expanded' } in the incorrect location of the function. Your function should look like this instead:
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(plugins.sass({ style: 'expanded' }))
.pipe(gulp.dest('public_html/css'));
});
There is no such an option as { style: 'expanded' } available in for gulp.src
To control the output style, you need to specify outputStyle and pass it as an argument with plugins.sass(options) call.
Related
I am trying to make "main.css" file to be directly in css folder.
However, I get this path "/css/Content/scss/main.css" and I want
"/css/main.css"
gulp.task('sass', () => {
const sourceFolder = path.join('.', 'Content', 'scss', 'main.scss');
const distFolder = path.join('.', 'wwwroot', 'css');
return gulp.src(sourceFolder)
.pipe(sass({
sourceMap: true,
style: 'compressed'
}))
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(distFolder))
.on('end', () => console.log(`[${new Date().toLocaleTimeString()}] -> sass compilation complete...`));
});
Assuming you want main.css to end up in wwwroot/css try changing to this line:
return gulp.src(sourceFolder, { base: path.join('Content', 'scss') })
Sorry but I cannot explain why your original code works on Linux.
From glob base in gulpjs.docs:
Vinyl instances generated by src() are constructed with the glob base
set as their base property. When written to the file system with
dest(), the base will be removed from the output path to preserve
directory structures.
So with the base set as path.join('Content', 'scss') that portion of the filepath will be removed, thus main.css will go directly into your distFolder with the parent folders removed.
sass gives an error message
Error: File to import not found or unreadable: helpers/mixins.scss
Parent style sheet: .../temp/styles/all.scss
on line 1 of temp/styles/all.scss
>> #import 'helpers/mixins.scss';
^
at this point, the code looks like
#import 'helpers/mixins.scss';
#import 'helpers/variables.scss';
#import 'helpers/fonts.scss';
#import '../../node_modules/bootstrap/scss/bootstrap';
#import '../../node_modules/fotorama/fotorama.css';
.navbar {
#extend navbar-light;
#extend bg-faded;
}
gulp task looks like this
var blocks = 'app/blocks/**/*.scss';
gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
.pipe(concat('all.scss'))
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false
}))
.pipe(gulp.dest('temp/styles'))
));
How to solve this problem?
how to make galp correctly understand the way?
In your gulp file you can declare sass paths, eg.
var sassPaths = [
'node_modules/bootstrap/scss',
'node_modules/fotorama'
];
These are relative to your gulp file.
Then set include paths inside your list of sass arguments
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false,
includePaths: sassPaths
}))
Then in your sass make sure your imports are either relaitve to the parent sass file or relative to one of the include paths.
I'm trying to use sass with grunt and I'm having a weird behavior.
If I create any file with underscore it doesn't work anymore, and it doesn't import either.
That is my Gruntfile, really simple:
module.exports = function(grunt) {
'use strict';
require('load-grunt-tasks')(grunt);
grunt.initConfig({
watch: {
sass: {
files: 'scss/**/*.{scss,sass}',
tasks: ['sass']
}
},
sass: {
example: {
options: {
outputStyle: 'expanded'
},
files: {
'public/css/app.css': 'scss/**/*.{scss,sass}'
}
}
}
});
grunt.registerTask('default', ['watch']);
};
If I create a file, for example, application.scss in scss/, it works and creates the file app.css in public/css, but if I create any file with underscore, for instance: _variables in scss/ it doesn't work anymore, it doesn't create the file or changes anything and it doesn't import either.
application.scss:
#import "variables";
body {
background-color: $bg-color;
}
_variables.scss:
$bg-color: red;
Files with names starting with an underscore are considered as partial in the eyes of SASS. This means that SASS would not make an actual css file out of them. To prevent this, either create an index.scss file and import your partials in it or remove the underscore from their names.
Official DOcs
I solved it by using:
files: [{
expand: true,
cwd: 'scss',
src: '**/*.{scss,sass}',
dest: 'public/css',
ext: '.css'
}]
I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.
My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.
Here's my current gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// CONFIG =========================/
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/style.css' : 'assets/css/sass/*.scss'
}
}
},
watch: {
css: {
files: 'assets/css/sass/*.scss',
tasks: ['sass']
}
}
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// TASKS =====================================/
grunt.registerTask('default', ['watch']);
};
Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.
At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.
I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:
#import "vendor/*";
#import "modules/*";
#import "partials/*";
And then your grunt file would have something like:
sass: {
dist: {
options: {
require: 'sass-globbing'
},
files: {
'assets/css/style.css' : 'assets/css/sass/style.scss'
}
}
}
Using Sass with sourcemaps works fine for me with unminified CSS, but using my minified CSS it doesn't.
I'm guessing this might be because the references first get's built to the compiled css file, but then the minified version changes everything and references then fail, could that be it? If so, I still don't know what to do about it. Any help to find a solution would be much appreciated.
This is in my last line of my main *scss-file:
/*# sourceMappingURL=mytheme-full.css.map */
I'm thinking; If I just change to the following, it should work. But no!
/*# sourceMappingURL=mytheme-full-min.css.map */
This is from my Gruntfile.js:
cssmin: {
build: {
files: {
'sites/all/themes/mytheme/css/mytheme-full-min.css': 'sites/all/themes/mytheme/css/mytheme-full.css'
}
}
},
sass: {
dist: {
options: {
sourcemap: 'auto'
},
files: {
'sites/all/themes/mytheme/css/mytheme-full.css': 'sites/all/themes/mytheme/sass/mytheme-full.scss'
}
}
},
To date, grunt-contrib-cssmin doesn't support sourcemaps (see here and here).
However, both grunt-contrib-sass and grunt-autoprefixer support sourcemaps, so your best bet is probably to enable sourcemaps on those and use the unminified css for development and debugging. To enable sourcemaps in autoprefixer, just set:
options: {
map: true
}