Last active
September 16, 2016 22:17
-
-
Save marklj/e72591a7067f3e857ad90b34f693477d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Inspired by: https://pawelgrzybek.com/from-sass-to-postcss/ | |
| // Using Laravel Elixir 5 | |
| var elixir = require('laravel-elixir'); | |
| var autoprefixer = require('autoprefixer'); | |
| require('laravel-elixir-postcss'); | |
| elixir(function(mix) { | |
| mix.postcss('app.css', { | |
| plugins:[ //postcss's plugins | |
| require("postcss-import"), | |
| require('postcss-simple-vars'), | |
| require('postcss-nested'), | |
| require('postcss-assets'), | |
| autoprefixer({ browsers: ['last 4 versions'] }), | |
| require('cssnano') | |
| ], | |
| // use below for jigsaw projects | |
| //output : 'source/css', | |
| //srcDir : 'source/_assets/postcss/' | |
| }); | |
| }); | |
| // package.json | |
| { | |
| "private": true, | |
| "scripts": { | |
| "prod": "gulp --production", | |
| "dev": "gulp watch" | |
| }, | |
| "devDependencies": { | |
| "gulp": "^3.9.1", | |
| "install": "^0.8.1", | |
| "laravel-elixir": "^5.0.0", | |
| "laravel-elixir-postcss": "^0.4.0", | |
| "npm": "^3.10.6", | |
| "postcss-assets": "^4.1.0", | |
| "postcss-nested": "^1.0.0" | |
| }, | |
| "dependencies": { | |
| "autoprefixer": "^6.4.1", | |
| "cssnano": "^3.7.4", | |
| "postcss-import": "^8.1.2", | |
| "postcss-simple-vars": "^3.0.0" | |
| } | |
| } | |
| // other cool plugins: | |
| // - https://github.com/postcss/postcss#plugins | |
| // - http://postcss.parts/ | |
| // - postcss-inline-svg (convert svg files to stylable inline svg) | |
| // - precss (make postcss behave like sass) | |
| // - postcss-font-magician (automatically add web fonts!) | |
| // - pixrem (generates pixel fallbacks for rem units) | |
| // - postcss-bem-linter | |
| // - postcss-define-property (define and use custom properties) | |
| // - postcss-pxtorem | |
| // - css-mqpacker | |
| // - lost |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment