How to use sass - 10 common examples

function scss(inFile, outFile) {
  const options = {
    file: inFile,
    includePaths: ["./website"],
  };
  let result = renderSync(options).css.toString("utf8");
  // Due to how parcel works, we have to include relative URLs in the sass
  // file website/main.scss
  // Example:
  //  background-image: url(./img/deleteButtonOutline.svg);
  // When bundle.scss is built in ./build/website/ it then can't resolve these
  // relative path names. Like if it's in /docs.
  // So just hack it here... All this should be replaced with parcel soon.
  result = result.replace(/.\/img\//g, "/static/img/");
  result = result.replace(/\(img\//g, "(/static/img/");
  result = result.replace(/\("img\//g, `("/static/img/`);
  console.log("scss", inFile, outFile);
  fs.writeFileSync(outFile, result);
}

  runWorkerLoop(args => sass.cli_pkg_main_0_(args));
  // Note: intentionally don't process.exit() here, because runWorkerLoop

runWorkerLoop(args => sass.cli_pkg_main_0_(args));
  // Note: intentionally don't process.exit() here, because runWorkerLoop
  // is waiting for async callbacks from node.
} else {
  debug('Running a single build...');
  if (args.length === 0) throw new Error('Not enough arguments');
  if (args.length !== 1) {
    throw new Error('Expected one argument: path to flagfile');
  }

  // Bazel worker protocol expects the only arg to be @.
  // When we are running a single build, we remove the @ prefix and read the list 
  // of actual arguments line by line.
  const configFile = args[0].replace(/^@+/, '');
  const configContent = fs.readFileSync(configFile, 'utf8').trim();
  sass.cli_pkg_main_0_(configContent.split('\n'));
}

process.exitCode = 0;

const fs = require("fs-extra");
const sass = require("sass");

// This builds a customized version of materialize that doesn't override the parent
// site's styling.  To use, comment out
//
// @import "components/toast" 
// @import "components/navbar";
//
// in the source file (src/libs/...) and run this script.
var result = sass.renderSync({
  file: `src/libs/materialize-css/sass/materialize.scss`,
  outputStyle: 'compressed'
});

fs.writeFile(`src/assets/css/materialize.min.css`, result.css);

css,
        {
          syncImport: true,
          filename: fileName,
          ...(rendererOptions.less || {}),
        } as Less.Options,
        (error, output) => {
          if (error || output === undefined) throw error;
          transformedCss = output.css.toString();
        },
      );
    } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
      const filePath = getFilePath(fileName);
      const { includePaths, ...sassOptions } = rendererOptions.sass || {};

      transformedCss = sass
        .renderSync({
          // NOTE: Solves an issue where tilde imports fail.
          // https://github.com/sass/dart-sass/issues/801
          // Will strip `~` from imports, unless followed by a slash.
          data: css.replace(/(@import ['"])~(?!\/)/gm, '$1'),
          indentedSyntax: fileType === FileTypes.sass,
          includePaths: [filePath, 'node_modules', ...(includePaths || [])],
          ...sassOptions,
        })
        .css.toString();
    } else {
      transformedCss = css;
    }

    const processedCss = processor.process(transformedCss, {
      from: fileName,

const fs = require('fs');
const util = require('util');
const sass = require('sass');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcss = require('postcss');

const writeFile = util.promisify(fs.writeFile);

// build css
const filePath = './src/ImageViewer.scss';
const css = sass.renderSync({ file: filePath }).css.toString();

async function compileCss () {
  const unminifiedCssPromise = postcss([autoprefixer]).process(css, { from: undefined });
  const minifiedCssPromise = postcss([cssnano, autoprefixer]).process(css, { from: undefined });
  const [unminifiedCss, minifiedCss] = await Promise.all([unminifiedCssPromise, minifiedCssPromise]);
  const distUnminified = writeFile('./dist/iv-viewer.css', unminifiedCss);
  const distMinified = writeFile('./dist/iv-viewer.min.css', minifiedCss);

  return Promise.all([distUnminified, distMinified]);
}

compileCss();

let { status, text, formatted } = await new Promise(resolve => {  // eslint-disable-line
      sass.compile(load.source, options, resolve);
    });
    if (status !== 0) {

// do we have include paths -- if so start probing them
          if (request.options && request.options.includePaths &&
            Array.isArray(request.options.includePaths)) {
            return this.tryReadFile(request.current + '.scss', request.options.includePaths, (err, data) => {
              if (err) return done({ error: err })
              done({ content: data })
            })
          }
        }
        // return error
        done({
          error: "Unable to resolve requested SASS import; try setting the 'includePaths'" +
            'compiler option if your import is not in the root directory.'
        })
      })
      sass.compile(source, options, (result) => {
        if (result.status !== 0) {
          var error = new Error('SASS compilation failed, see error message for details: ' + result.formatted)
          cb(error, null)
        } else {
          cb(null, result.text)
        }
      })
      break
    default: {
      cb(new Error('Unknown language: ' + lang), null)
    }
  }
}

if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

function fromFileURL(url) {
  const address = decodeURIComponent(url.replace(/^file:(\/+)?/i, ''));
  return path.sep === '/' ? `/${address}` : address.replace(/\//g, '\\');
}

// intercept file loading requests (@import directive) from libsass
sass.importer(async (request, done) => {
  // Currently only supporting scss imports due to
  // https://github.com/sass/libsass/issues/1695
  let content;
  let resolved;
  let readImportPath;
  let readPartialPath;
  try {
    resolved = await resolvePath(request);
    const partialUrl = resolved.replace(/\/([^/]*)$/, '/_$1');
    readImportPath = fromFileURL(resolved);
    readPartialPath = fromFileURL(partialUrl);
    content = await loadFile(readPartialPath);
  } catch (e) {
    try {
      content = await loadFile(readImportPath);
    } catch (er) {

DataPacksBuilder.prototype.compile = function (lang, source, options, cb) {
  // This function contains the core code to execute compilation of source data
  // add addtional languages here to support more compilation types
  switch (lang) {
    case 'scss':
      // intercept file loading requests from libsass
      sass.importer((request, done) => {
        // (object) request
        // (string) request.current path libsass wants to load (content of »@import "