Compile sass naar css (wordpress bones)

Om scss (sass) naar css te compilen zijn verschillende mogelijkheden. Er kan software worden gebruikt, een plugin voor je IDE of Grunt. Hier volgt de setup voor Grunt (node js, grunt) (getest in windows 10).

  1. Installeer de laatste versie van Node.js.
    • // controleer de installatie van node js in de cmd
      
      C:>node -v
      v0.12.7
    • // controleer de installatie van node package manager
      
      C:> npm -v
      2.11.3
  2. Installeer Ruby.
  3. Installeer Grunt
    C:> npm install -g grunt-cli
  4. Setup the gruntfile.js and package.json files:
    • (set the up in the project directory)
    • gruntfile (example for the wordpress bones theme)
      module.exports = function(grunt) {
      	grunt.initConfig({
      		pkg: grunt.file.readJSON('package.json'),
      		sass: {
      			dist: {
      				files: {
      					'css/style.css' : 'scss/style.scss'
      				}
      			}
      		},
      		watch: {
      			css: {
      				files: '**/*.scss',
      				tasks: ['sass']
      			}
      		},
      		cssmin: {
                          sitecss: {  
                              options: {  
                                  banner: '/* NF minified css file */'  
                              },  
                              files: {  
                                  'mcss/style.min.css': [  
                                      'css/style.css'
                                                      ]  
                                              }
                                      }
                              }
                      });
      	grunt.loadNpmTasks('grunt-contrib-sass');
      	grunt.loadNpmTasks('grunt-contrib-watch');
      	grunt.registerTask('dev',['watch']);
      	grunt.loadNpmTasks('grunt-contrib-cssmin');
      };
    • package.json (to go with the gruntfile above)
      {
        "name": "library",
        "version": "0.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "BSD",
        "devDependencies": {
          "grunt": "~0.4.5",
          "grunt-contrib-sass": "~0.9.2",
          "grunt-contrib-watch": "~0.6.1",
          "grunt-contrib-cssmin": "~0.12.3"
        }
      }

       

  5. Install sass
    C:project> npm install node-sass
    C:project>gem install sass

    Check if sass is working

    C:project> sass -v
  6. Run nu de node package manager in de projectmap
    C:project> npm install
  7. In de ‘cmd’ in de projectfolder run nu (geunt dev)
    C:wampwwwdev.website.nuwp-contentthemesprojectlibrary>grunt dev
    Running "watch" task
    Waiting...
    >> File "scssbreakpoints_768up.scss" changed.
    Running "sass:dist" (sass) task
    
    Done, without errors.
    Completed in 2.797s at Sun Aug 30 2015 21:11:57 GMT+0200 (West-Europa (zomertijd
    )) - Waiting...
    >> File "scssbreakpoints_768up.scss" changed.
    Running "sass:dist" (sass) task
    
    Done, without errors.
    Completed in 2.671s at Sun Aug 30 2015 21:12:01 GMT+0200 (West-Europa (zomertijd
    )) - Waiting...
    

  8. Als er foutmeldingen staan, geven deze meestal een hint waar de fout ligt.

 

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.