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'
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 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 have a gulp workflow with a simple less task like so:
gulp.task('less', function() {
gulp.src(source_less)
.pipe(sourcemaps.init())
.pipe(less({
sourceMap: true
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest_less));
});
I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file.
But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file.
Instead, it displays something like this:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
I dramatically simplified my gulpfile, removing livereload, autoprefixer and such.
But even in this stripped down version I can't get the source URL to be right.
Been over this thing for quite some time now, any help would be very much appreciated!
You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}
Try it yourself here: https://www.base64decode.org/
For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.
For example:
.pipe(sourcemaps.write('./'))
Is possible decode a JSON file with Node-Sass?
Ex:
#import "../data/data.json";
I need iterate this data directly into a variable
Any help is welcome :)
sass-json-vars is an excellent gem, but won't work with node-sass (which is a requirement of the original question).
Instead, try node-sass-json-importer, which is essentially the same thing, only re-worked to fit into node-sass's importer api.
There's a gem called Sass JSON Vars that does exactly what you want.
You can install the gem with the following command line code:
gem install sass-json-vars
HOW TO USE Sass JSON Vars
For projects using Sass >= 3.3
Place variables in a JSON file:
// variables.json
{
"font-sans": "Helvetica, sans-serif",
"colors": {
"red": "#c33"
}
}
Import the file in Sass to expose variable names:
#import "variables.json"
body {
color: map-get($colors, red);
font: $font-sans;
}
Require sass-json-vars when compiling:
sass style.scss -r sass-json-vars
For projects using Sass <= 3.2
Place variables in a JSON file:
// variables.json
{
"font-sans": "Helvetica, sans-serif",
"colors-red": "#c33"
}
Import the file in Sass to expose variable names:
#import "variables.json"
body {
color: $colors-red;
font: $font-sans;
}
Require sass-json-vars when compiling:
sass style.scss -r sass-json-vars
More info :
The project's Github page
Sharing Data Between Sass and JavaScript with JSON
I'm not quite sure how you would do it but here is a great example on how to add custom ruby functions to sass:
https://gist.github.com/chriseppstein/1561650
And heres one on how to parse json:
Parsing a JSON string in Ruby
Maybe after putting them together you could do something like this?
module Sass::Script::Functions
def json(Sass::Script::String)
require 'rubygems'
require 'json'
JSON.parse(string)
end
end
Add it to the end of your config.rb file, and make sure you have json ruby gem installed:
gem install json
and run:
compass compile --force
to get it all to work.
* this is obviously untested and doesn't work, but it might help you get where you need to go.