Browserify transfomer to compile Sass styles and optionally inject them into the browser. Plus watchify support!
JavaScript CSS
Latest commit 3d5d50b Jan 10, 2017 @cody-greene add issue template
Permalink
Failed to load latest commit information.
.github add issue template Jan 10, 2017
lib Add check for firstResult.map Dec 22, 2016
tests lint Nov 2, 2016
.gitignore use node 4.x.x - no more transpiling Apr 20, 2016
.travis.yml run tests on node 6 & 7 Nov 2, 2016
LICENSE Initial commit May 18, 2015
history.md release Dec 22, 2016
package.json release Dec 22, 2016
readme.md replace `useNodeEnv` with --debug Aug 10, 2016

readme.md

scssify

Browserify transfomer to compile sass stylesheets, and automatically inject <style> tags. Correctly informs watchify about any @imports and also supports postcss plugins. Sourcemaps are fully supported too!

node >= 4.0.0

npm version Build Status Dependency Status devDependency Status

Example

/* MyComponent.scss */
.MyComponent {
  color: red;
  background: blue;
}
// MyComponent.js
require('./MyComponent.scss') // or .sass, or .css
console.log('MyComponent background is blue')

Settings

The default settings are listed below.

const browserify = require('browserify')
const scssify = require('scssify')
browserify('entry.js')
  .transform(scssify, {
    // Disable <style> injection
    autoInject: false,

    // Useful for debugging; adds data-href="src/foo.scss" to <style> tags
    autoInject: 'verbose',

    // require('./MyComponent.scss').css === '.MyComponent{color:red;background:blue}'
    // autoInject: false, will also enable this
    // pre 1.x.x, this is enabled by default
    export: false,

    // Pass options to the compiler, check the node-sass project for more details
    sass: {
      // See the relevant node-sass documentation
      importer: 'custom-importers.js',

      // This will let the importer state be reset if scssify
      // is called several times within the same process, e.g. by factor-bundle
      // should export a factory function (which returns an importer function)
      // overrides opt.sass.importer
      importerFactory: 'custom-importer-factory.js',

      // Enable both of these to get source maps working
      // "browserify --debug" will also enable css sourcemaps
      sourceMapEmbed: true,
      sourceMapContents: true,

      // This is the default only when opt.sass is undefined
      outputStyle: 'compressed'
    },

    // Configure postcss plugins too!
    // postcss is a "soft" dependency so you may need to install it yourself
    postcss: {
      autoprefixer: {
        browsers: ['last 2 versions']
      }
    }
  })
  .bundle()

Example config using package.json:

{
  "browserify": {
    "transform": [
      ["scssify", {
        "sass": {
          "outputStyle": "compressed",
          "importerFactory": "custom-importers.js",
          "includePaths": ["node_modules", "bower_components"]
        }
      }],
    ]
  },
}

Command line usage:

$ browserify MyComponent.js -t scssify >bundle.js