usage

[konsumer]

How do I use this as a browserify transform?

I currently have a package.json that looks like this:

{
  "scripts": {
    "start": "npm run build:libs && budo --pushstate --open --cors --live --watch-glob=*.{js,html,scss} src/app.js:app.js -d pub",
    "build": "npm run build:debug",
    "build:debug": "npm run build:libs && npm run build:app",
    "build:release": "npm run build:libs && npm run build:app && npm run build:uglify",
    "build:app": "browserify --debug src/app.js -o pub/app.js",
    "build:libs": "browserify --debug src/libs.js -o pub/libs.js",
    "build:uglify": "uglifyjs pub/app.js -o pub/app.js && uglifyjs pub/libs.js -o pub/libs.js"
  },
  "devDependencies": {
    "browserify": "^13.0.0",
    "browserify-ngannotate": "^2.0.0",
    "budo": "^8.1.0",
    "sassify": "^0.10.0",
    "stringify": "^5.1.0",
    "uglify-js": "^2.6.2"
  },
  "dependencies": {
    "angular": "^1.5.2",
    "angular-animate": "^1.5.3",
    "angular-aria": "^1.5.3",
    "angular-cookies": "^1.5.3",
    "angular-file-upload": "^2.2.0",
    "angular-material": "^1.0.7",
    "angular-messages": "^1.5.3",
    "angular-sanitize": "^1.5.3",
    "angular-ui-router": "^0.2.18",
    "lodash": "^4.11.1"
  },
  "browserify": {
    "transform": [
      [
        "sassify",
        {
          "auto-inject": true
        }
      ],
      "stringify",
      "browserify-ngannotate"
    ]
  },
  "stringify": {
    "appliesTo": {
      "includeExtensions": [
        ".html"
      ]
    },
    "minify": true
  }
}

this works great for my current project, allowing me to require scss files, etc.

[zoubin]

@konsumer You can use the latest release (v0.3.0) the same way with sassify.

[konsumer]

Sweet. Thanks!

[expelledboy]

It would be even sweeter with an example in the readme ;)

[expelledboy]

Install

$ npm install --save-dev browserify-postcss

CLI

$ browserify script.js -o bundle.js -t [ browserify-postcss --inject ]

Config

"browserify": {
    "transform": [
        [
            "browserify-postcss",
            {
                "plugin": [
                    "postcss-import",
                    "postcss-advanced-variables"
                ],
                "inject": true
            }
        ]
    ]
},

Although I havent tested it yet 🐹