Grunt not compiling Sass to CSS

Tags: sass gruntjs
Question!

I can't figure out what's wrong with my Gruntfile, but the way I understand it is that the sass task will compile abc.scss to abc-exp.css, then, cssmin will take abc-exp.css and generate abc.css. Finally, the watch task will run the css task, which includes sass and cssmin. However, the accurate CSS is only generated the first time I run my tasks, then, on any subsequent changes, nothing is generated.

My project structure is:

  • _themes/abc/css/abc-exp.css
  • _themes/abc/css/abc.css
  • _themes/abc/sass/abc.scss
  • _themes/abc/sass/partials
  • _themes/abc/sass/partials/_base.scss
  • _themes/abc/sass/partials/_variables.scss
  • _themes/abc/sass/partials/_mixins.scss

Gruntfile:

module.exports = function(grunt){

  require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      build: {
        files: {
          '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
        }
      }
    },

    // autoprefixer: {
    //   build: {
    //     src: '_themes/abc/css/abc-exp.css',
    //     dest: '_themes/abc/css/abc-exp.css'
    //   }
    // },

    cssmin: {
      build: {
        src: '_themes/abc/css/abc-exp.css',
        dest: '_themes/abc/css/abc.css'
      }
    },

    // cssbeautifier: {
    //   files: ['_themes/abc/css/abc-exp.css'],
    //   options: {
    //     indent: '  ',
    //     openbrace: 'end-of-line',
    //     autosemicolon: false
    //   }
    // },

    uglify: {
      options: {
      },
      my_target: {
        files: {
          '_themes/abc/js/abc-min.js': ['_themes/abc/js/abc.js'],
          '_themes/abc/js/abc-bottom-min.js': ['_themes/abc/js/abc-bottom.js']
        }
      }
    },

    watch: {
      css: {
        files: ['_themes/abc/sass/*.scss'],
        tasks: ['css']
      },
      js: {
        files: ['_themes/abc/js/abc.js', '_themes/abc/js/abc-bottom.js'],
        tasks: ['js']
      }
    },

    browserSync: {
      dev: {
        bsFiles: {
          src: [
            '_themes/abc/css/*.css',
            '_themes/abc/img/*',
            '_themes/abc/js/*.js',
            '_themes/abc/**/*.html',
            '_themes/abc/**/*.md'
          ]
        },
        options: {
          watchTask: true,
          proxy: 'wifi.dev:8888'
        }
      }
    }
  });

  // grunt.registerTask('default',   ['browserSync', 'watch']);
  // grunt.registerTask('css',       ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
  // grunt.registerTask('buildcss',  ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
  // grunt.registerTask('js',        ['uglify']);
  // grunt.registerTask('buildjs',   ['uglify']);

  grunt.registerTask('default',   ['browserSync', 'watch']);
  grunt.registerTask('css',       ['sass', 'cssmin']);
  grunt.registerTask('js',        ['uglify']);

};


Answers

I think you need to replaced build with dist like this:

sass: {
  dist: {
    files: {
      '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
    }
  }
},

In order to make the task observable by watch you need to change it from css to sass

watch: {
  sass: {
    files: ['_themes/abc/sass/**/*.{scss,sass}'],
    tasks: ['sass']
  },
  ...
},


Shouldn't this be sufficient? Just notice this will remove .denominator, and replace the inner text with desired value.

$('.medium-item-price').text('$1')

$('.medium-item-price').text('$1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="medium-item-price"><span class="denominator">$</span>699.99</div>

By : Adam Azad


You can do it like following.

$('.medium-item-price').contents().last()[0].textContent='100';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium-item-price">
  <span class="denominator">$</span>
  699.99
</div>

By : Azim


This video can help you solving your question :)
By: admin