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.

score 4 · Answer 1 · answered Dec 17 '13 at 08:08

4

I stumbled upon this a few days ago

Sass integration for pub

answered Dec 17 '13 at 08:08

Günter Zöchbauer

623,577
216
2,003
1,567

Great, thanks. But I don't think this will run automatically during local testing within the Dart Editor. – Jonathan Edwards Dec 17 '13 at 13:38
AFAIR this runs with pub build when it is configured as transformer in pubspec.yaml – Günter Zöchbauer Dec 17 '13 at 13:39
Right, and pub build is not run automatically by Editor launches. – Jonathan Edwards Dec 17 '13 at 13:56
It was the closest I know to your question :-| – Günter Zöchbauer Dec 17 '13 at 13:57
Ant for Dart would be nice :/ – Nestor Ledon Dec 17 '13 at 15:30
3

In case anybody is curious the docs for build.dart are [here](https://www.dartlang.org/tools/editor/build.html). Probably only need to change a few lines of code from the example. Quick google - [blog post](http://tekhoow.blogspot.co.nz/2013/10/install-sass-on-ubuntu-for-dart.html) from someone who has done this. – Greg Lowe Dec 18 '13 at 20:33

score 2 · Answer 2 · edited May 19 '14 at 03:54

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"}}]');
        }
      }
    }
  }
}

Is this included in the sass pub package? – Steven Roose Aug 24 '15 at 23:07 — Steven Roose, Aug 24 '15 at 23:07

score 1 · Answer 3 · answered Jun 04 '14 at 17:11

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

answered Jun 04 '14 at 17:11

mlorber

1,441
1
12
20

The Dart Editor is an Eclipse IDE that automatically builds and launches Dart programs. The question is about how to get it to automatically use SASS in its build. Supposedly pub serve support has just been added to the Editor, so this may become possible shortly. – Jonathan Edwards Jun 05 '14 at 05:30
What do you miss ? I use the pub sass package for my final build (with pub), and during local development I do not need to have sass handled by Dart Editor since sass --watch compile files on the fly – mlorber Jun 05 '14 at 12:55
Often Chrome gets run before sass -watch has a chance to rebuild the .css file. – Jonathan Edwards Jun 05 '14 at 20:16

How to use SASS in Dart editor

3 Answers3