dart2js attempting to compile css?

Question

It looks as though dart2js is trying to compile bootstrap's css files. I've tried to google the issue, but I couldn't find anything useful. I guess that's because I'm not really sure what I should be googling.

My last project went fine, and because I was using all the same libraries in this one, I just copied the pubspec.yaml.

me@my_computer$ pub build

---

Pub Build Output:

Loading source assets... 
Loading angular2/transform/codegen, dart_to_js_script_rewriter, observe and smoke/src/default_transformer transformerLoading angular2/transform/codegen, dart_to_js_script_rewriter, observe and smoke/src/default_transformer transformers... 
Loading angular2 transformers... (3.4s) 
Building progress_viewer... 
[Info from Dart2JS]:
Compiling progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart...
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart:1:9:
Expected ';' after this.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.min.css.dart;
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart:1:44:
Can't have modifier '.3' here.
Try replacing modifier '.3' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.min.css.dart;
                                           ^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart:1:70:
Can't have modifier '.' here.
Try replacing modifier '.' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.min.css.dart;
                                                                     ^
[Warning from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart:
Could not find 'main'.
Try adding a method named 'main' to your program.
[Info from Dart2JS]:
Took 0:00:01.104162 to compile progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart.
[Info from Dart2JS]:
Compiling progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart...
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart:1:9:
Expected ';' after this.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.min.css.shim.dart;
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart:1:44:
Can't have modifier '.3' here.
Try replacing modifier '.3' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.min.css.shim.dart;
                                           ^^
[Warning from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart:
Could not find 'main'.
Try adding a method named 'main' to your program.
[Info from Dart2JS]:
Took 0:00:00.503648 to compile progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart.
[Info from Dart2JS]:
Compiling progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.css.dart...
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.dart:1:9:
Expected ';' after this.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.css.dart;
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.dart:1:44:
Can't have modifier '.3' here.
Try replacing modifier '.3' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.css.dart;
                                           ^^
[Warning from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.dart:
Could not find 'main'.
Try adding a method named 'main' to your program.
[Info from Dart2JS]:
Took 0:00:00.401814 to compile progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.css.dart.
[Info from Dart2JS]:
Compiling progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart...
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart:1:9:
Expected ';' after this.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.css.shim.dart;
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart:1:44:
Can't have modifier '.3' here.
Try replacing modifier '.3' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.css.shim.dart;
                                           ^^
[Error from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart:1:71:
Can't have modifier '.' here.
Try replacing modifier '.' with 'var', 'final', or a type.
library progress_viewer_web_css_bootstrap_3.3.6_css_bootstrap.css.shim.dart;
                                                                      ^
[Warning from Dart2JS]:
web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart:
Could not find 'main'.
Try adding a method named 'main' to your program.
[Info from Dart2JS]:
Took 0:00:00.383610 to compile progress_viewer|web/css/bootstrap-3.3.6/css/bootstrap.css.shim.dart.
[Info from Dart2JS]:
Compiling progress_viewer|web/main.dart...
[Info from Dart2JS]:
Took 0:00:11.785265 to compile progress_viewer|web/main.dart.
Build failed.

---

My pubspec.yaml:

This is basically the one that is used on the angular2 getting started page, but with the platform directives added in.

name: progress_viewer
description: Just messing with some stuff
version: 0.1.0
environment:
  sdk: '>=1.13.0 <2.0.0'
dependencies:
  angular2: 2.0.0-beta.17
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    entry_points: web/main.dart
    platform_directives:
    - package:angular2/common.dart#CORE_DIRECTIVES
    - package:angular2/common.dart#FORM_DIRECTIVES
- dart_to_js_script_rewriter

---

My Directory Layout:

I've only been using dart for a couple of weeks, but I followed their directory layout guide.

project_folder/
|- web/
|  |- index.html
|  |- main.dart
|  |- css/
|     |- bootstrap-3.3.6/
|        |- css/
|        |  |- bootstrap.css
|        |  |- bootstrap.min.css
|        |
|        |- fonts/
|           |- glyphicons-halflinks-regular.eot
|           |- glyphicons-halflinks-regular.svg
|           |- glyphicons-halflinks-regular.ttf
|           |- glyphicons-halflinks-regular.woff
|           |- glyphicons-halflinks-regular.woff2
|
|- lib/
|  |- some_component/
|  |  |- some.component.dart
|  |  |- some.component.html
|  |  |- ...( possible other files e.g. .css )
|  |
|  |- ...( other components )
|  
|- pubspec.yaml
|
|- ...( other files )

I have listed everything that is under the bootstrap-3.3.6 directory. There is no such file web/css/bootstrap-3.3.6/css/bootstrap.min.css.dart or web/css/bootstrap-3.3.6/css/bootstrap.min.css.shim.dart

Even though pub build doesn't appear to be working for this project, pub serve has no problems at all.

Answer 1

I would try to exclude the web/css directory for the Angular2 transformer:

transformers:
- angular2:
    $exclude: ['web/css/**']
    entry_points: web/main.dart
    platform_directives:
    - package:angular2/common.dart#CORE_DIRECTIVES
    - package:angular2/common.dart#FORM_DIRECTIVES
- dart_to_js_script_rewriter