I'm reading a tutorial about sass here then I tried some other approach and I cant get the answer in this tutorial. Theres the problem. I have this code in my gulpfile.js
gulp.task('compileNavbar', function() {
gulp.src('assets/css/sass/**/*.navbar.scss')
.pipe(sass('navbar.css'))
.pipe(gulp.dest('assets/css/'));;
});
As of now, I only have assets/css/sass/guest.navbar.scss and this code locates the scss files correctly and puts the output css file in the correct directory BUT the css is named as guest.navbar.css which I didnt expect. I want it to be named as navbar.css but how to?
gulp-sass doesn't take any file name parameters. Use gulp-rename to rename your files. If you have more than one .navbar.scss files you want to concatenate into one navbar.css files, feel free to use gulp-concat. This one takes a file name parameter :-)
Install gulp-rename with npm install gulp-rename --save-dev
var rename = require('gulp-rename');
return gulp.src('assets/css/sass/**/*/*.navbar.scss')
.pipe(sass())
.pipe(rename('navbar.css'))
.pipe(gulp.dest('assets/css');
or
Install gulp-concat with npm install gulp-concat --save-dev
var concat = require('gulp-concat');
return gulp.src('assets/css/sass/**/*/*.navbar.scss')
.pipe(sass())
.pipe(concat('navbar.css'))
.pipe(gulp.dest('assets/css');
Related
I have a variable file in scss and import it with Symfony encore for my scss and sass files (see the code below).
// enables Sass/SCSS support
Encore.enableSassLoader((options) => {
options.implementation = require('sass')
options.additionalData = `#import "#/scss/variables.scss"`
});
The problem is there are sass (node-module(s)) and scss (template) files in my project which needs them.
If I run it like the snippet above it went fine for the sass files, but the scss files give an error: 'SassError: expected ";" after the #import line in the additionalData'.
However if I add the ; after the import line I get an error from the sass files 'SassError: semicolons aren't allowed in the indented syntax.'.
It's probably a small issue which I miss but I have no clue at the moment. I tried it with the added parameter indentedSyntax with true and false in the sassOptions but this was no success.
Anyone have an idea?
With kind regards
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/"));
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'