I have the following in my gulpfile.js
var baseDir = 'Base/Assets/scss/**/**';
var modulesDir = 'Modules/**/Assets/scss/*';
return gulp.src([baseDir + '*.scss', modulesDir + '*.scss'])
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Within the baseDir I have an app.scss file like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
Within the util there's a function called rem-calc. I use this function in my Modules scss files, but these are never executed. Instead in the outputted css I have the following margin-top: rem-calc(10); when this should actually have been converted in to rem's.
The only thing I can thing of is that Gulp isn't remembering the src ordering. Any help will be greatly appreciated.
I have solved this by removing the modulesDir from the gulpfile, instead I'm using a new package called gulp-sass-glob
This allows me to specify the glob in my app.scss file (within baseDir), like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
// now import the modules
#import "../../../../Modules/**/Assets/scss/*.scss";
My gulpfile.js is then like this:
var baseDir = 'Base/Assets/scss/**/**';
gulp.task('site-css', function () {
return gulp.src(baseDir + '*.scss')
.pipe(sassGlob())
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Hopefully this helps someone else which comes across this scenario.
Related
Here is my _custom.scss:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
//$body-bg: $gray-dark;
//$body-color: $gray-light;
$blue: #363636;
$component-active-bg: #484545;
$dropdown-bg: $brand-primary;
$dropdown-link-color: #c3c3c3;
$dropdown-link-hover-color: darken(#c3c3c3, 5%);
and bootstrap.scss:
// Core variables and mixins
#import "variables";
#import "mixins";
#import "_custom";
I am compiling it with the provided Gruntfile.js.
The resultant css file has no effect. Everything looks just like with the original css.
How can I test whether I am getting compilation process actually working?
Thanks
From the format of boostrap.scss I think you should have:
#import "custom";
Next, when you make your changes in _custom.scss, leave off the "!default" tag. For example:
// _variables.css
$blue: #0275d8 !default;
/// _custom.css
$blue: #002b5b;
Is there any option available in gulp-sass to combine sass files?
For example:
main.scss:
$var: red;
control.scss:
#import 'main';
.a{
color: $var;
}
The combined output file should be single scss file like below
$var: red;
.a{
color: $var;
}
Did you try something like this?
gulp = require('gulp');
concat = require('gulp-concat');
// the default task
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(concat('all.scss'))
.pipe(gulp.dest('./dist/'));
});
This should produce a single combined scss in ./dist/all.scss.
I don't know if #import statements are handled correctly, but these
issues are usually handled by ad-hoc modules (for example, gulp-sass), which produce a .css output...
Here is solution, full proof solution. You need to use gulp-scss-combine as well.
(function(r){
const gulp = r('gulp');
const combine = r('gulp-scss-combine');
const concat = r('gulp-concat');
gulp.task('combine-scss', ()=>gulp.src('scss/**') // define a source files
.pipe(combine()) // combine them based on #import and save it to stream
.pipe(concat('style.scss')) // concat the stream output in single file
.pipe(gulp.dest('css')) // save file to destination.
);
})(require);
You can play with code here . code , basically doing same thing but not in gulp but a node.js standard application. just delete all.scss file or its content, then run the program. you will see the result.
You have to execute one file that imports all other scss files, but when you listen the changes, you have to listen the changes of all files in the scss directory.
gulp.task('sass', function() {
// You have to execute one file that import all other scss files
return gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', function() {
// You have to listen the all files in the scss directory
gulp.watch('src/scss/**/*.scss',['sass']);
});
I'm writing my own static site generator in ruby and I'm in the process of adding Sass compiler to my code.
def compile_sass
# system 'sass _sass/styles.scss styles.css'
options = {
syntax: :scss,
style: :compressed
}
render = Sass::Engine.new(File.read('_sass/styles.scss'), options).render
File.write('style.css', render)
end
But problem occurs when the styles.scss file has #import in it. Causing
(sass):1: File to import not found or unreadable: variables. (Sass::SyntaxError)
Both SCSS files are located in _sass folder, main script in root, and compile_sass is located in _generator. But when I uncomment the system call and comment the rest, everything works as expected.
styles.scss
#import 'variables';
html {
background-color: red;
}
_variables.scss
body {
background-color: blue;
}
I tried almost everything, checked how to import stuff, looked at the documentation, but I can't find anything that would helped me find and define the problem.
Turns out I had to load all _sass/*.scss files into Sass::Engine like this:
Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
load_paths << '_sass'
end
My gulpfile.js contains this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less(['frontend.less','bootstrap.less','variables.less'],'public/css/frontend.css');
});
frontend.less contains:
#import 'bootstrap.less';
bootstrap.less contains:
#import "variables.less";
#import "../vendor/bootstrap/less/mixins.less";
#import "../vendor/bootstrap/less/normalize.less";
#import "../vendor/bootstrap/less/print.less";
...
Well, the frontend.css depends on
frontend.less
bootstrap.less
variables.less
When I start "gulp watch", it recompiles the frontend.css only when I modify frontend.less, but it should start, too, when I modify one of these files.
I need to define dependencies, but how?
I am new to using gulp-sass and sass\scss structure in general, so bear with me!
I have a scss file in which I want to import some partials.
I have a styles folder in which lives my main scss file and a partials sub folder which contains a couple of files I wish to import in.
So at the top of my main.scss I have the typical:
#import 'partials/main_menu';
#import 'partials/main_usermenu';
Here are the relevant pieces of my gulp file:
var paths = {
scss_files:'./src/assets/styles/**/*.scss'
}
gulp.task('compile_sass', function () {
return gulp.src(paths.scss_files, {base:'src'})
.pipe(gulp.dest(paths.dist))
.on('error', gutil.log)
.pipe(sass({outputStyle: 'compressed'})
.on('error', sass.logError))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.dist))
});
When my gulp task runs, I get an error saying my main_menu partial was not found or unreadable and hence it fails to import.
Am I missing something in my task, e.g. is there some gulp-sass option I should be using or should it just work?
Thanks
After viewing this related question I was able to solve a similar problem I was having.
I believe if you add the 'includePath' option to the sass() function call that contains the parent path to your partials directory the error will go away.
i.e. something like
.pipe(sass({includePath: ['parent/PathTo/Partials'], outputStyle: 'compressed'})