Skip to content
/ scssify Public
forked from cody-greene/scssify

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

License

Notifications You must be signed in to change notification settings

faiq/scssify

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

scssify

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

Build Status Dependency Status devDependency Status

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

scssify

#Development

  1. Clone the repo
  2. npm install
  3. npm run dev

This project uses Babel to transpile ES6 to ES5.

License

MIT

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.0%
  • CSS 3.0%