Hoping for someone to help me get my SCSS files to compile using gulp.
I've been doing lots of reading on this (http://www.devworkflows.com/posts/getting-scss-auto-prefixer-and-source-map-to-play-nice/) and followed this stack overflow conversation (Gulp-sass will not compile to CSS) among others. I still can't get my .scss to compile using my gulp script.
When I run gulp sass the process outputs:
[16:25:32] Working directory changed to ~/projects/theBeta
[16:25:32] Using gulpfile ~/projects/theBeta/gulpfile.js
[16:25:32] Starting 'sass'...
[16:25:32] Finished 'sass' after 6.37 ms
However there is no output file. I have been able to get this to work via the command line using this command - sass scss/_bootstrap.scss:css/compiled/bootstrap.css
Here's the script in question:
// Compile sass
gulp.task('sass', function() {
gulp.src('./app/styles/scss/_bootstrap.scss')
.pipe(sass({sourcemap: true}))
.on('error', sass.logError)
.pipe(gulp.dest('./app/styles/css/compiled'));
})
Is there something subtle I am missing, or a behavior I am not understanding/aware of?
Add return front of gulp.src and rename _bootstrap.scss to bootstrap.scss as it's not an include:
gulp.task('sass', function() {
return gulp.src('./app/styles/scss/bootstrap.scss')
.pipe(sass({sourcemap: true}))
.on('error', sass.logError)
.pipe(gulp.dest('./app/styles/css/compiled'));
})
Related
I'm trying to compile some .scss files into css using gulp. gulpfile.js:
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass",
function() {
return gulp.src("app/assets/sass/*.scss")
.pipe(sass({
includePaths: [
"govuk_modules/govuk_frontend_toolkit/stylesheets/",
"govuk_modules/govuk_template/assets/stylesheet/",
"govuk_modules/govuk-elements-sass/"
]
}).pipe(gulp.dest("./wwwroot/stylesheets/")));
});
I'm using Visual Studio 2017 and when I run the sass task in task explorer, I get the expected files output into the destination folder, however, they are .scss files and not the expected .css files.
There are some 20+ files in total in the paths, and these do get compiled in to 4 files but like I say, are .scss not css.
Any ideas?
OK, so I've found the problem. One of the SCSS files is referencing a path to another file which I've misspelled the path to!
Corrected and working now
There's a problem with the closing of your first pipe, you should close it before starting the pipe for gulp.dest.
By doing so the files should be compiled to css and not scss.
.pipe(sass({
includePaths: [
"govuk_modules/govuk_frontend_toolkit/stylesheets/",
"govuk_modules/govuk_template/assets/stylesheet/",
"govuk_modules/govuk-elements-sass/"
]
})).pipe(gulp.dest("./wwwroot/stylesheets/"));
Right now, I am using Gulp for a project which is basically a CSS framework. The way I am doing it right now is, I #import all the other .less files in a single app.less and then pass it to the Gulp task:
// Compile
gulp.task("compile", function() {
return gulp
.src("source/app.less")
.pipe(less())
.pipe(concat("framework.edge.css"))
.pipe(gulp.dest("./dist"))
.pipe(
autoprefixer({
browsers: ["last 4 versions"],
cascade: false
})
)
.pipe(concat("framework.css"))
.pipe(gulp.dest("./dist"))
.pipe(sourcemaps.init())
.pipe(
uglify({
maxLineLength: 80,
UglyComments: false
})
)
.pipe(concat("framework.min.css"))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("./dist"));
});
This works totally as expected. The stylesheets are first compiled and the exported as app.edge.css, then it is passed through autoprefixer, exporting framework.css and then the minification process.
The problem is, now I want to export each stylesheet as a separate module, such as
grids.css
scaffolding.css
and so on...
How can I achieve this? I am actually not getting what logic to apply.
Use globbing
If a gulp tasks's src is x/**/*.less, the task will process all LESS files in x or any subfolder of x and will output each file separately in the dest, preserving the src's file structure.
To exclude a file or files, use !....
Learn the globbing rules in the Glob Primer, and test your pattern with the Glob online tester
Depending on your needs, you might want two tasks, one for outputting individual files and one for building the full framework.css.
I have the following SASS structure:
app/css/main.scss (compiled to main.css)
/components/_.scss (imported to main.scss)
The only file that I am watching at the moment is main.scss. Once I change that file, it checks all the imports and refreshes the css with the from all the _component.scss.
What I'd like to accomplish is to watch for changes on the _component.scss files and refresh main.scss if a change has been made on any of the _component.scss files. At the moment, I could't find a way to setup a watcher(GULP) to update main.scss if one of the imported _component.scss files is changed.
I hope that makes sense.
using Gulp you can watch the entire folder where you store .scss files.
Let's suppose every .scss files are contained in a scss folder.
There you'll have your main.scss (the file that will be converted in main.css) and all your partial files (whose name starts with _. For example your _component.scss).
Let's suppose you have a destination folder called stylesheets for the compiled css file too.
Then you can use the following Gulp script to manage the watching process:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('./scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./stylesheets'))
});
gulp.task('watch', function() {
return gulp.watch('scss/**/*.scss', ['sass'])
.on('change', function(event) {
console.log('File ' + event.path.slice(event.path.indexOf('/scss/'),event.path.length) + ' was ' + event.type + ', running tasks...');
});
});
Now run the task watch with the command gulp watch.
To learn more about Gulp-sass follow this link https://www.npmjs.com/package/gulp-sass
watch all scss files, just use file mask(example: *.scss, **/*.scss)
I have my Gulp file set up:
elixir(function(mix) {
mix.sass('app.scss').sass('admin.scss');
});
Which in my eyes should take both scss files and compile them into the public css folder.
However, it just creates one app.css file and doesn't create the admin.css file.
My terminal shows:
[23:01:43] Running Sass: resources/assets/sass/app.scss
[23:01:44] Running Sass: resources/assets/sass/admin.scss
[23:01:44] Finished 'watch' after 315 ms
[23:01:44] gulp-notify: [Laravel Elixir] Sass Compiled!
[23:01:45] gulp-notify: [Laravel Elixir] Sass Compiled!
So whats happening with the admin.scss file?
To do this you have to specify the output folder for each file (and also restart gulp / gulp watch)
elixir(function(mix) {
mix
.sass('app.scss', './public/css/app.css')
.sass('admin.scss', './public/css/admin.css');
});
Once again, people at Larachat have pointed me in the right direction, so I thought I put this info here.
Turns out it's pretty easy, and it's documented: http://laravel.com/docs/5.1/elixir#sass
Just put the files in an array instead of calling sass two times, like this:
mix.sass(['app.scss', 'admin.scss'], 'public/css')
I am using gulp-sass to compile sass in node.js. I am using the libsass config to set the includePaths option.
The following code works:
includePaths: './project/components/controls/selectAgencies/'
...but I would like to do something with recursion and get the same result, something like one of the following possibilities. As it stands right now, with these settings I get error: "file to import not found or unreadable".
includePaths: './project/components/controls/'
// or
includePaths: './project/components/controls/**/'
In compass, this is as simple as setting add_import_path "project/components"
The problem was actually in my sass file. If my include path is
./project/components/controls/
and the sass file lives at
./project/components/controls/selectAgencies/_selectAgencies.scss then my .scss file should reflect the rest of the path, like so:
#import 'selectAgencies/selectAgencies'