post-css and sass template

README.md

post-css and sass template

Set up

Run npm install to download all dependencies. Set up a directory structure like so:

root/
|-dist/
  |-css/
    |-main.css
|
|-src/
  |-scss/
    |-main.scss
|
|-Gruntfile.js
|-package.json

I.e.: mkdir -p dist/css/ && mkdir -p src/scss/

Alternatively, you could edit Gruntfile.js and provide your own directory structure.

Usage

Run grunt watch Write your SCSS code in src/scss/main.scss, grunt will automatically detect changes and compile to CSS and run autoprefixer.

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({

    sass: {
      dist: {
        files: {
            'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },

    postcss: {
      options: {
        map: true,
        processors: [
          require('autoprefixer')({
            browsers: ['last 2 versions']
          })
        ]
      },
      dist: {
        src: 'dist/css/style.css'
      }
    },

    watch: {
      styles: {
        files: ['src/scss/*.scss'],
        tasks: ['sass','postcss']
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-contrib-watch');
}

package.json

{
  "name": "postCSS-SCSS-template",
  "description": "A simple template for providing postCSS and SCSS support in Grunt",
  "license": "GPLv3",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~1.0.1",
    "grunt-contrib-sass": "~1.0.0",
    "grunt-contrib-watch": "~1.0.0",
    "grunt-postcss": "~0.8.0",
    "autoprefixer": "~7.1.3",
    "pixrem": "~4.0.1",
    "cssnano": "~3.10.0"
  }
}