Can't get SASS to compile to CSS file

@1BJK903 wrote:

Hi all,

I can't get SASS to compile my .css file when changing my .scss file, although "watch" is working. So I change my ionic.app.scss file and the command line outputs no errors, instead, it gives me:

[14:39:43] Starting 'sass'...
[14:39:43] Finished 'sass' after 2.38 ms

I tried everything. Like this:

sudo npm install -g n
sudo n 0.12.7
sudo npm install node-sass@2
sudo npm -g install node-gyp@3
sudo npm rebuild node-sass

This solved a mixin error for me, but it still does not compile the .css

My file structure:

Frontend

------ scss
----------ionic.app.scss

---

-----www
------------css
---------------ionic.app.css (made by me, so not automatically)
---------------style.css
---------------style.scss (don't know why it's here?)
--------------- ionic.app.min.css (made by me, so not automatically)

PS: my Gulpfile.js:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});

gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});

gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});

---

My ionic.app.scss looks like this btw;

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

body {
background: red;
}

So now, when I change the ionic.app.scss, it does not put that in the ionic.app.css, which I would expect. My question: what am I doing wrong? I thought that it would automagically add and compile the .scss to the .css file...

Posts: 1

Participants: 1

Read full topic