How to use node-sass - 10 common examples

To help you get started, we’ve selected a few node-sass examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ericgio / react-bootstrap-typeahead / scripts / buildCSS.js View on Github external
function buildCSS(options) {
  // Get the base filename.
  let filename = options.file
    .split('/')
    .pop()
    .replace('.scss', '');

  // Denote minified CSS.
  if (options.outputStyle === 'compressed') {
    filename = `${filename}.min`;
  }

  // Render CSS files.
  sass.render(options, (err, result) => {
    if (err) {
      console.log(err);
      process.exit(1);
    }

    fs.writeFileSync(path.join(OUT_DIR, `${filename}.css`), result.css);
  });
}
github wordpress-mobile / gutenberg-mobile / sass-transformer.js View on Github external
function transform( src, filename, options ) {
	if ( typeof src === 'object' ) {
		// handle RN >= 0.46
		( { src, filename, options } = src );
	}

	const exts = [
		// add the platform specific extension, first in the array to take precedence
		options.platform === 'android' ? '.android.scss' : '.ios.scss',
		'.native.scss',
		'.scss',
	];

	if ( filename.endsWith( '.scss' ) || filename.endsWith( '.sass' ) ) {
		const result = sass.renderSync( {
			data: src,
			includePaths: [ path.dirname( filename ), ...autoImportIncludePaths ],
			importer( url /*, prev, done */ ) {
				// url is the path in import as is, which LibSass encountered.
				// prev is the previously resolved path.
				// done is an optional callback, either consume it or return value synchronously.
				// this.options contains this options hash, this.callback contains the node-style callback

				const urlPath = path.parse( url );
				const importerOptions = this.options;
				const incPaths = importerOptions.includePaths.slice( 0 ).split( ':' );
				if ( urlPath.dir.length > 0 ) {
					incPaths.unshift( path.resolve( path.dirname( filename ), urlPath.dir ) ); // add the file's dir to the search array
				}
				const f = findVariant( urlPath.name, exts, incPaths );
github HalfdanJ / ofDocGenerator / app.js View on Github external
xml2js = require('xml2js'),
  cheerio = require('cheerio'),
  _ = require('underscore')._;



// Set this to the section you work on to speed up the generation.
// But remember to remove it again! :)
var filterGroup = '';

// Check for sass compatibility (it does not work on Travis-ci)
try {
  var sass = require('node-sass');

  //Create the css file from the scss file in assets
  sass.renderFile({
    file: 'assets/stylesheet.scss',
    outFile: 'output/stylesheet.css',
    error: function(error) {
      console.error(error);
    },
    success: function(){}
  });
} catch(e){
  console.log("Sass not installed, skipping");
  filterGroup = '';
}


var root =  process.argv[2] || "../..";
//var dir = root + "/libs/openFrameworksCompiled/project/doxygen/build/";
var dir = "doxygen_build/";
github julesmoretti / fanscape / middleware.js View on Github external
module.exports    = function(app){

//  sass css generator ==========================================================
  if( process.env.LOCAL ){
    sass.renderFile({
      file: './views/css/style.scss',
      success: function(css) {
        // console.log(css);
        console.log('style.css overwritten');
      },
      error: function(error) {
        console.log(error);
      },
      includePaths: ['views/css'],
      // outputStyle: 'compressed',
      outFile: './views/css/style.css'
    });
  }

//  loading standard middleware =================================================
    app.use(bodyParser.json());
github infor-design / enterprise / scripts / build / sass.js View on Github external
function compileSass(options = {}) {
  // set default options
  /* eslint-disable-next-line */
  options = Object.assign({
    importer: onceImporter(),
    style: 'expanded'
  }, options);

  // Render the CSS/Map result
  const result = sass.renderSync(options);
  const fileWritePromises = [];

  const originalOutFile = `${options.outFile}`;
  options.file = path.resolve(options.file);
  options.outFile = path.resolve(options.outFile);

  // Build directories
  createDirs(dirs);

  // Write the result to file
  fileWritePromises.push(writeFile(options.outFile, result.css).then((err) => {
    if (err) {
      logger('error', `Error: ${err}`);
    }
    logger('success', `Built "${originalOutFile}"`);
  }));
github JasonEtco / flintcms / server / utils / compile-sass.js View on Github external
return new Promise((resolve, reject) => {
    sass.render(opt, (err, res) => {
      /* istanbul ignore if */
      if (err) reject(err)
      resolve(res)
    })
  })
}
github johnnybenson / sassr / lib / sassr.js View on Github external
function transform(opts, done) {
    opts = _.extend({}, SASS_DEFAULTS, opts);

    function cssPostProcessorDone(error, css) {
        if (error) {
            done(error);
            return;
        }

        // JSON.stringify protects against unescaped quotes winding up
        // in the modules that get generated.
        done(error, sassrModuleWith(JSON.stringify(css)));
    }

    sass.render(opts, function(error, result) {
        var css = error ? '' : result.css.toString();
        if (error || !_.isFunction(opts.cssPostProcessor)) {
            cssPostProcessorDone(error, css);
        } else {
            opts.cssPostProcessor(css, cssPostProcessorDone);
        }
    });
}
github ionic-team / ionic-app-scripts / src / sass.ts View on Github external
return new Promise((resolve, reject) => {

    sassConfig.omitSourceMapUrl = false;

    if (sassConfig.sourceMap) {
      sassConfig.sourceMapContents = true;
    }

    nodeSassRender(sassConfig, (sassError: SassError, sassResult: Result) => {
      const diagnostics = runSassDiagnostics(context, sassError);

      if (diagnostics.length) {
        printDiagnostics(context, DiagnosticsType.Sass, diagnostics, true, true);
        // sass render error :(
        reject(new BuildError('Failed to render sass to css'));

      } else {
        // sass render success :)
        renderSassSuccess(context, sassResult, sassConfig).then(outFile => {
          resolve(outFile);

        }).catch(err => {
          reject(new BuildError(err));
        });
      }
github triplecanopy / b-ber / packages / b-ber-tasks / src / sass / index.js View on Github external
new Promise(resolve =>
    nodeSass.render(
      {
        // Importer allows use of '~' to denote node_modules directory in SCSS files
        importer: (url, file, done) =>
          url[0] === '~'
            ? done({ file: resolveImportedModule(url.replace('~', '')) })
            : done({ file: url }),

        // Add build vars at runtime with the SCSS buffer (which is transformed
        // to string in the backticks)
        data: `$build: "${state.build}";${scssString}`,

        includePaths: [
          state.src.stylesheets(),
          path.dirname(state.theme.entry),
          path.dirname(path.dirname(state.theme.entry)),
        ],
github energy-data / market-opportunities / gulpfile.js View on Github external
var fs = require('fs')
var gulp = require('gulp')
var $ = require('gulp-load-plugins')()
var del = require('del')
var browserSync = require('browser-sync')
var reload = browserSync.reload
var watchify = require('watchify')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var sourcemaps = require('gulp-sourcemaps')
var gutil = require('gulp-util')
var exit = require('gulp-exit')
var rev = require('gulp-rev')
var revReplace = require('gulp-rev-replace')
var SassString = require('node-sass').types.String
var cp = require('child_process')
var notifier = require('node-notifier')

// /////////////////////////////////////////////////////////////////////////////
// --------------------------- Variables -------------------------------------//
// ---------------------------------------------------------------------------//

// The package.json
var pkg

// Environment
// Set the correct environment, which controls what happens in config.js
if (!process.env.DS_ENV) {
  if (!process.env.TRAVIS_BRANCH || process.env.TRAVIS_BRANCH !== process.env.DEPLOY_BRANCH) {
    process.env.DS_ENV = 'staging'
  } else {