Angular Dart - Using sass files

Question

I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)

I currently have the following structure:

However I cannot reference a main.css file as it is not found and if in a component I put something like this styleUrls: ['lib/assets/sass/main.scss']

The webdev serve command fails

My pubscpec is

dependencies:
  angular: ^5.0.0
  angular_components: ^0.9.0
  bootstrap_sass: any

dev_dependencies:
  angular_test: ^2.0.0
  sass_builder: ^2.1.1
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  mockito: ^3.0.0
  test: ^1.3.2

I cannot figure out what's wrong and also the structure I should use

Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve

Thanks, Alexi

Ted Sander Ted Sander · Accepted Answer · 2018-09-19T06:06:38

So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'

I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.

AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.

One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.

Angular Dart - Using sass files

1 Answers