I am trying to add scss to my grunt file so i ran the following command:
npm install grunt-contrib-sass sass --save-dev.
Then i added the following to my Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-sass'); and
grunt.initConfig({
...
sass: {
dev: {
files: {
'<%=meta.src %>assets/css/all2.css': '<%=meta.src %>assets/scss/build.scss'
}
},
dist: {
files: {
'<%=meta.dist %>/assets/css/all.min.css': '<%=meta.src %>/assets/scss/build.scss'
}
}
},
When i run this i get the output of the build.scss in the console and it creates a empty file?
What am i missing????
Running "sass:dev" (sass) task
#flupdidup {
font-weight: bold;
}
Running "sass:dist" (sass) task
#flupdidup {
font-weight: bold;
}
Done, without errors.
Process terminated with code 0.
a minimal recreation of the issue can be found here: https://github.com/Peter-Optiway/grunt-sass-issue
Switching to grunt-sass was always an option, but your issue was not because of that. The issue was because you had sass install using npm.
npm install -g sass
When you look at that
$ sass --help
Compile Sass to CSS.
Usage: dart-sass <input>
-s, --style Output style.
[expanded (default)]
-c, --[no-]color Whether to emit terminal colors.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
It has no output parameter. While grunt-contrib-sass expects the sass to be install from the ruby gem.
$ sudo gem install sass
Now sass will have different options
$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
...
And now the build works fine
$ cat ./dist/assets/css/all.min.css
main #flupdidup {
font-weight: bold;
background: #eeffcc; }
/*# sourceMappingURL=all.min.css.map */
I managed to fix the issue by changing to the grunt-sass package instead.
npm install --save-dev load-grunt-tasks load-grunt-tasks
Then i added the following to my Gruntfile.js require('load-grunt-tasks')(grunt); and it just worked.
Related
I am trying to compile my scss files using susy, node-sass, grunt-sass
I added all these dependencies using npm install.
I am adding the setup for grunt like
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
options: {
style: 'expanded',
require: 'susy'
},
files: {
'app/crossbrand_us/styleguide/css/shared.css': 'app/sass/xb/widgets/advertised-offers/wdgt-advertised-offers-vehicle.scss'
}
}
},
#import "wdgt-advertised-offers-shared";
#import "node_modules/susy/sass/susy";
$wdgt-advertised-offers-vehicle-selector: ".wdgt-advertised-offers-vehicle";
#{$wdgt-advertised-offers-vehicle-selector} {
#include pad(1%);
}
but this throws an error
Fatal error: no mixin named pad
How do I fix this?
The latest versions of Susy (3.x) do not include any mixins. In order to use the old mixins, you will have to downgrade to a 2.x version of Susy (2.2.14 is the latest). Or check out the docs to get started with Susy 3.
I'm not sure if there are any other issues in the setup as well…
I made a standard installation of SASS (Dart Sass 1.16.1), following instructions: https://sass-lang.com/install.
My setup:
node -v : v11.6.0
sass --version: 1.16.0
OS: Ubuntu linux 18.04 LTE.
SASS installation:
npm install -g sass
Process flow:
First creation of CSS from SCSS:
sass index.scss index.css
Attemt to start [--watch]: (the both files are located in same folder):
sass --no-source-map --watch index.scss index.css
Also tried with colon [:] between file names, which actually is only required when specifying folders:
sass --no-source-map --watch index.scss:index.css
After activating the watch, I change something [color: red;] to [color: blue], but css is not update when saving scss.
Terminal printout after running [--watch]: None.
My SCSS file:
$color: blue;
.div-1 {
background-color: $color;
}
The CSS result without running [--watch]:
.div-1 {
background-color: red;
}
I Think the problem might be, that you need to use : between the input and the output.
sass --no-source-map --watch index.scss:index.css
Reference is here:
https://sass-lang.com/guide
In trying to learn/use sass for 1st time, I used Homebrew to install dart-sass on recently updated High Sierra 10.13.3 . That worked and sass --version shows 1.1.1 I created a simple .scss file:
$color: #d9534f;
body {
color: $color;
}
and while in the same directory, then issued:
sass main.scss main.css --trace
in console and got:
Error reading main: Cannot open file.
dart:io _File.readAsBytesSync
package:sass/src/io/vm.dart 27 readFile
package:sass/src/compile.dart 33 compile
package:sass/sass.dart 63 compile
package:sass/src/executable.dart 110 main
What do I need to change, learn or do to get this working?
Oops. Reinstall. I ran
brew update multiple times, then
brew uninstall sass then
brew install --devel sass/sass/sass
and now
sass main.scss main.css
works.
I am trying to use sass with grunt. I have installed ruby, sass and grunt in my path.
The versions are,
node: 0.10.20
npm: 1.3.11
grunt-cli: 0.1.13
grunt: 0.4.5
sass: 3.4.4
my package json is,
"private": true,
"devDependencies": {
"express": "4.x",
"grunt": "~0.4.1",
"grunt-contrib-sass": "~0.3.0",
"grunt-contrib-watch": "~0.4.4"
}
my grunt file is,
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/home.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Now if i tried "grunt" command, i am getting the below error. Any help?
run: grunt or grunt watch or grunt sass
error:
Running "sass:dist" (sass) task
Error: Error generating source map: couldn't determine public URL for the source
stylesheet.
No filename is available so there's nothing for the source map to link
to.
on line of standard input
Use --trace for backtrace.
Warning: Error: Error generating source map: couldn't determine public URL for t
he source stylesheet.
No filename is available so there's nothing for the source map to link
to.
on line of standard input
Use --trace for backtrace. Use --force to continue.
Aborted due to warnings.
any idea?
Looks like you don't have compass installed. You can run gem install compass. In your original example you had your grunt file set up to use compass which would have given you access to compass mixins and features.
Your code looks fine now and should work but seems to not be finding your files. I'll GI e it a go as well when I'm next to a computer.
In the meantime you can try the sourcemap: none option on the sass task.
Update:
Works perfectly fine for me. Could you run tree -I node_modules and post the output(unless you think there's any sensitive info) just to double check the files are in the right place?
I expect it to look something like this
.
├── Gruntfile.js
├── package.json
├── sass
│ └── style.scss
└── style
├── style.css
└── style.css.map
Second update:
Your packages seem significantly older than what's in my fresh setup. Either try starting from scratch or do the following:
Install npm-check-updates
npm install npm-check-updates
And then run the following
npm-check-updates will tell you which packages are outdated
npm-check-updates -u will update those packages in your package.json
npm update to update all your outdated packages.
updating node modules helped..
npm-check-updates will tell you which packages are outdated
npm-check-updates -u will update those packages in your package.json
npm update to update all your outdated packages.
I am trying out gulp as an alternative build tool to Grunt, to compile my scss to css, as I have heard it can be much faster.
I having problems doing even a basic compile of my scss files. I have tried using the gulp-sass, gulp-ruby-sass and gulp-compass plugins for gulp and I get pretty much the same error message every time:
error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)
So it looks like it is falling down as soon as it hits a compass mixin. I have ruby installed on my PC with compass version 1.0.0.alpha.19 and sass version 3.3.7.
Here is my gulpfile:
var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
gulp.src('../sass/UK/screen.scss')
.pipe(compass({
css: '../css',
sass: '../sass',
sourcemap: true,
style: 'compressed'
}))
.pipe(gulp.dest('../css/UK/screen.css'));
});
gulp.task('sass', function () {
gulp.src('../sass/UK/**/*.scss')
.pipe(sass({ style: 'compressed', sourcemap: true }))
.pipe(gulp.dest('../css/UK'));
});
Any ideas how I tell it where my copy of compass is installed? I thought it was installed globally.
There is bit of confusion around using Compass with Gulp. There are three gulp extensions: gulp-ruby-sass, gulp-compass and gulp-sass. They basically do the same thing. They compile SASS to CSS. But:
gulp-ruby-sass: Is a wrapper around command line tool: sass that comes with the language. It is written in Ruby and it is installed via gem - Ruby's package manager.
gulp-compass: Is a wrapper around command line tool: compass that comes with Compass framework. It is written in Ruby and it is also installed via gem. However, Compass is just a framework. It consists of SASS files only. All that compass command do, is setting paths to framework SASS files to sass command so that Compass dependencies are being resolved.
gulp-sass: Is a wrapper around tool: node-sass which is Node.JS binding to libsass: a C/C++ implementation of a Sass compiler.
The above answers did not work for me since I am using gulp-sass. It does not see Compass files out of the box. So first I installed compass-mixins (SASS files of Compass framework) and later I imported them with compass-importer:
import compass from 'compass-importer';
import sass from 'gulp-sass';
gulp.task('styles', function () {
return gulp.src(config.styles.src)
.pipe(sass({
importer: compass
})
.pipe(gulp.dest(config.styles.dest))
})
You right, compass should be installed globally on your system to get this work, at least easily. I recommend you to uninstall sass and compass to get something clean using
gem uninstall sass && gem uninstall compass
And then re-install them with :
gem install sass
gem install compass --pre
And after you can define a gulp task like so
gulp.task('compass', function () {
return gulp.src('../sass/UK/screen.scss')
.pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
.pipe(gulp.dest('../css/UK/screen.css'));
});
Notice that gulp-ruby-sass has a new syntax which should look like:
gulp.task('compass', function ()
sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
.pipe(gulp.dest('../css/UK/screen.css'));
});