How to make web_ui compile css files automatically

Question

I'm using web_ui and whenever I change a CSS file in web/css/ it will not be compiled unless I change the web/index.html file. I guess that's because only the file 'web/index.html' is listed as entry point in build.dart.

But adding the stylesheet to the entry points list didn't work.

Is there a way to autocompile CSS files every time they are changed without having to edit the .html files?

Answer 1

Keep in mind that you can edit any .dart or .html file and the compiler will run; it doesn't have to be the entry point file.

Autocompilation of CSS files on change can be achieved by passing the compiler the full flag:

build(['--machine', '--full'], ['web/index.html']);

The machine flag tells the compiler to print messages to the Dart Editor console. For a full list of flags see Build.dart and the Dart Editor Build System.

This method means that every time a file is changed your entire project will be rebuilt instead of the usual incremental approach. If you have a large project this may take a while. Here is a more comprehensive build file that takes advantage of incremental compilation and only rebuilds the whole project if a css file was changed:

List<String> args = new Options().arguments;
bool fullRebuild = false;

for (String arg in args) {
  if (arg.startsWith('--changed=') && arg.endsWith('.css')) {
    fullRebuild = true;
  }
}

if(fullRebuild) {
  build(['--machine', '--full'], ['web/index.html']);
} else {
  build(args, ['web/index.html']);
}