Forums

  • # March 4, 2017 at 3:28 am

    I’ve started to learn this just now. I installed the grunt. If I get grunt watch it is automatic but only in case one file. How could I make it wath all scss file in my theme, and make the css in different folders. I don’t really undestand how could it working in big.

    This is my gruntfile.js now:

    module.exports = function(grunt) {
     // Project configuration.
     grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),
        connect: {
         uses_defaults: {}
       },
        sass: {
         dev: {
           options: { sourceMap: true },
           files: { 'sites/all/themes/uj/css/uj.styles.css' : 'sites/all/themes/uj/sass/uj.styles.scss' }     
        }
       },
       watch: {
        css: {
          files: 'sites/all/themes/uj/**/*.scss',
          tasks: [ 'sass:dev' ],
          options: { livereload: true }
     }
    }
    
    
    
     });
     // Load Grunt plugins
    // grunt.loadNpmTasks('');
     // Default task(s).
     grunt.registerTask('default', []);
    
    
    
    // Load Grunt plugins
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    
    
    };
    
    # March 18, 2017 at 12:15 pm

    Hi Ayala!

    It looks like the sass:dev task is only targeting one file (sites/all/themes/uj/sass/uj.styles.scss). Try using a globbing pattern to target multiple files.

    Also, I’ve usually found it necessary to set the cwd (current working directory, I think) when working with multiple files. Something like this might work; it’s untested, so it might need some tweaking:

    sass: {
      dev: {
        options: { sourceMap: true },
        files: [{
          expand: true,
          cwd: 'sites/all/themes/uj/',
          src: ['sass/*.scss'],
          dest: 'css/',
          extDot: 'last'  // Extensions in filenames begin after this dot
        }]
      }
    }
    
    # March 21, 2017 at 3:08 am

    Thank you for your answer.
    Now it notice that what file changed, but it doesn’t change the css file.
    If i create a new scss, it is noticed.

    Completed in 0.593s at Tue Mar 21 2017 11:03:30 GMT+0100 (CET) - Waiting...
    >> File "sites/all/themes/tarsoly/sass/teszt.scss" changed.
    Running "sass:dev" (sass) task
    
    Done.
    

    But it doesn’t generate a css file.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag