scssify

Browserify transfomer to compile Sass styles and optionally inject them into the browser.

I have abandoned browserify in favor of webpack. It has far more momentum and a more cohesive plug in system. I will gladly accept pull requests or turn over the project to whomever wishes to maintain scssify.

Example

MyComponent.scss:

.MyComponent {
  color: red;
  background: blue;
}

MyComponent.js:

require('./MyComponent.scss');

console.log('MyComponent background is blue')

Indented Sass syntax may be used with the .sass extension:

require('./MyComponent.sass');

Install scssify:

$ npm i scssify

Settings

The default settings are listed below. They may be overridden though the CLI, package.json (scssify property) or though the API options.

In order for PostCSS plugins to be used, they must be installed in your projects package.json

  var browserify = require('browserify');
  var scssify = require('scssify');
  browserify('entry.js')
    .transform(scssify, {
      'autoInject': { //autoInject may be set to true to use defaults
        'verbose': false, //verbose adds data-href path to the file when styleTag is used
        'styleTag': false //When styleTag is false, a <link> tag is used
      },
      //To turn off autoInject, set autoInject to false
      //'autoInject': false,
      'sass': { //Full sass options
        'sourceComments': false,
        'sourceMap': false,
        'sourceMapEmbed': false,
        'sourceMapContents': false,
        'outputStyle': 'compressed'
      },
      'postcss': false,
      //you may specify what postcss plugins to use here
      'postcss': {
        'autoprefixer': {
          'browsers': ['last 2 versions'] //optional config, use an empty object for defualts
        }
      }
      ,
      'rootDir': process.cwd()
    })
    .bundle()

Install

#Development

Clone the repo
npm install
npm run dev

This project uses Babel to transpile ES6 to ES5.

License

MIT

tamascsaba / scssify