Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cody-greene/scssify
Browserify transfomer to compile Sass styles and optionally inject them into the browser. Plus watchify support!
https://github.com/cody-greene/scssify
Last synced: 4 months ago
JSON representation
Browserify transfomer to compile Sass styles and optionally inject them into the browser. Plus watchify support!
- Host: GitHub
- URL: https://github.com/cody-greene/scssify
- Owner: cody-greene
- License: mit
- Created: 2015-05-18T02:01:26.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-03-12T22:00:22.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T06:51:36.128Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 92.8 KB
- Stars: 20
- Watchers: 6
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: history.md
- License: LICENSE
Awesome Lists containing this project
README
### scssify
Browserify transfomer to compile [sass][] stylesheets. Features:
- Inject a `` tag at runtime or just export the compiled css as a string
- Correctly informs [watchify][] about any `@import`s
- Supports [postcss][]
- Handles sourcemaps
[](https://badge.fury.io/js/scssify)
#### Example
```css
/* MyComponent.scss */
.MyComponent {
color: red;
background: blue;
}
```
```javascript
// MyComponent.js
require('./MyComponent.scss') // or .sass, or .css
console.log('MyComponent background is blue')
```
#### Settings
```javascript
const browserify = require('browserify')
const scssify = require('scssify')
browserify('entry.js')
.transform(scssify, {
// Disable/enable <style> injection; true by default
autoInject: true,
// Useful for debugging; adds data-href="src/foo.scss" to <style> tags
autoInject: 'verbose',
// This can be an object too
autoInject: {
verbose: false,
// If true the <style> tag will be prepended to the <head>
prepend: false
},
// require('./MyComponent.scss') === '.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`:
```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
```
[sass]: http://sass-lang.com
[postcss]: https://github.com/postcss/postcss
[watchify]: https://github.com/substack/watchify