Package Exports

@koddsson/postcss-sass
@koddsson/postcss-sass/index.cjs.js
@koddsson/postcss-sass/index.es.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@koddsson/postcss-sass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Sass

PostCSS Sass lets you use Sass as a PostCSS plugin.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

:root {
  color: $primary-color;
  font: 100% $font-stack;
}

/* becomes */

:root {
  color: #333;
  font: 100% Helvetica, sans-serif;
}

PostCSS Sass uses dart-sass, letting you safely run transforms before and after Sass, watching for changes to Sass imports, and preserving source maps.

Usage

Add PostCSS Sass to your build tool:

npm install postcss @csstools/postcss-sass --save-dev

Node

Use PostCSS Sass to process your CSS:

require('@csstools/postcss-sass').process(YOUR_CSS);

PostCSS

Use PostCSS Sass as a plugin:

postcss([
  require('@csstools/postcss-sass')(/* node-sass options */)
]).process(YOUR_CSS);

The standard CSS parser included with PostCSS may not be able to parse SCSS specific features like inline comments. To accurately parse SCSS, use the SCSS Parser.

npm install postcss-scss --save-dev

const postcss = require('postcss');
const postcssSass = require('@csstools/postcss-sass');

postcss([
  postcssSass(/* pluginOptions */)
]).process(YOUR_CSS, {
  syntax: 'postcss-scss'
});

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Sass in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('@csstools/postcss-sass')(/* node-sass options */)
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Sass in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('@csstools/postcss-sass')(/* node-sass options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Options

PostCSS Sass options are directly forwarded to dart-sass options.