How to use SASS in Dart editor

Question

Anyone have a canned solution for integrating SASS or another CSS preprocessor into the Dart editor? Seems to require a custom build.dart, which I would rather copy than code. Thanks.

Answer 1

During development (with Dart Editor or another editor...), just use sass the way it's meant to be used, in your directory project :

sass -w .

Put the CSS generated files in the ignore list of your source code management system (aka .gitignore for git).

And for dart2js compilation, use the sass pub package : http://pub.dartlang.org/packages/sass

Answer 2

Here is a build.dart file with basic support for SASS:

import 'dart:io';

void main(List<String> args) {
  for (String arg in args) {
    if (arg.startsWith('--changed=')) {
      String file = arg.substring('--changed='.length);
      if (file.endsWith('.scss')) {
        var result = Process.runSync('sass',
            [ '--line-numbers', file,
              file.substring(0, file.length - '.scss'.length) + '.css']);
        if (result.exitCode != 0) {
          // report error (SASS seems to only report first error)
          // split error lines
          var lines = result.stderr.split('\n');
          // escape quotes in error message on first line
          var error = lines[0].replaceAll('"', r'\"');
          // extract line number from second line
          var numMatch = new RegExp(r'\d+').firstMatch(lines[1]);
          var lineNum = numMatch == null ? 1 : num.parse(numMatch.group(0));
          // Report error via JSON
          print('[{"method":"error","params":{"file":"$file","line":$lineNum,"message":"$error"}}]');
        }
      }
    }
  }
}

Answer 3

I stumbled upon this a few days ago

Sass integration for pub