sassify

2019-07-14 admin

sassify是什么

什么是sassify,Browserify middleware for adding required styles to the page.

sassify使用教程帮助文档

sassify

Simple middleware and method for Browserify to add Sass styles to the browser.

Build Status Dependency Status devDependency Status

Currently breaks in some cases on node 0.11.x with latest version (2.0.1) of node-sass as documented in node-sass issue #550. This is also the reason why node 0.11 is currently not supported. Use at your own risk (though no actual risk is involved, it might just not work).

Example

If you have a file entry.js that you want to require some css from style.scss:

style.scss:

body {
  background: pink;
}

entry.js:

require('./style.scss');

console.log('The background is pink!')

Or indented Sass syntax may be used with the .sass extension:

require('./style.sass');

Install sassify into your app:

$ npm install sassify

When you compile your app, just pass -t sassify to browserify:

$ browserify -t sassify entry.js > bundle.js

Gulp task example

…or you can do it using a gulp task.

var gulp = require('gulp');
var browserify = require('browserify');
var sassify = require('sassify');
var source = require('vinyl-source-stream');

gulp.task('build', function(done) {
  var result = browserify({})
      .transform(sassify, {
        base64Encode: false, // Use base64 to inject css
        sourceMap: false, // Add source map to the code
        // when 'no-auto-inject' is set to `true`, `require('./style.scss')` won't inject styles
        // it will simply return the css as a string
        'no-auto-inject': false
      });

  result.add('./entry.js');
  result.bundle()
      .pipe(source('output.js'))
      .pipe(gulp.dest('./'))
      .on('end', function(err) {
        if (err) {
          done(err);
        } else {
          done();
        }
      });
});

Imports

Sass allows one to @import other Sass files. This module synchronously imports those dependencies at the time of the bundling. It looks for the imported files in both the directory of the parent file and the folder where the module itself lives, so it should work so long as the paths in the @import commands are correct relative to the importing file, as usual. It is not currently tested for recursive importing.

Install

sassify

License

MIT

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69727.html

文章标题:sassify

回到顶部