SASS compile problem to tmp dir about ng-phonegap HOT 5 CLOSED

It looks like you just have to change the dest option in your development targetment to point at appDir instead of tmpDir.

tmpDir is used for production only, because the concatenated files are moved to a temporary directory first, before minification/uglification. However, in the development target, we leave them un-minified so it's more readable.

You can see on https://github.com/calvinl/ng-phonegap/blob/development/Gruntfile.js#190 line 190 that the development target is pointed directly at appDir.

Let me know if that works for you!

from ng-phonegap.

p.s. Not necessary, but i would recommend adding your sass target separately from the LESS target, rather than replacing it -- that way you can easily switch back and forth when you want/need to.

from ng-phonegap.

Yeah, I tried that actually. When I make a change to an scss file after pointing the dest option to appDir, I still get no compiled CSS file. Wondering if the clean is wiping it out?

>> File "src/scss/main.scss" changed.
Running "clean:css" (clean) task
Cleaning "www/css"...OK

from ng-phonegap.

Your sass task is misconfigured then. Try something like this:

// compile SASS files into CSS and store them in temp directories
sass: {
  production: {
    files: [
      {
        src: ['<%= srcDir %>/**/*.scss', '<%= srcDir %>/!**/_*.scss'],
        cwd: 'scss',
        dest: '<%= tmpDir %>/css/app.css',
        ext: '.css',
        expand: true
      }
    ],
    options: {
      style: 'expanded',
      compass: true
    }
  },
  development: {
    files: {
      // put app.css directly into the build directory for development
      "<%= appDir %>/css/app.css": [
        "<%= srcDir %>/css/**/*.scss"
      ]
    },
    options: {
      style: 'expanded',
      compass: true
    }
  }
},

Notice the the different style -- you can get more specific using the style you were using, but at least now you know it's just a misconfiguration. I'd suggest reading the docs for grunt-contrib-sass to get a handle on how it works.

You'll also need to install grunt-contrib-compass since you have compass: true in your options.

from ng-phonegap.

Ah, the problem was the cwd property. It was causing the path to be set relative to a path that didn't exist. This fixed the problem:

development: {
  options: {
    style: 'expanded',
    compass: true
  },
  files: [
    {
      expand: true,
      src: ['**/*.scss', '!**/_*.scss'],
      cwd: '<%= srcDir %>/scss',
      dest: '<%= appDir %>/css',
      ext: '.css'
    }
  ]
}

Thanks for the help Calvin!

from ng-phonegap.