Demonstrate how to use SASS to customize the layout

[zoechi]

I think it would be quite helpful to have at least some entry-level example how to apply custom styles mentioned in https://github.com/dart-lang/angular_components#custom-component-styles

[imtusharrai]

SCSS doesn't work in AngularDart material design components, of App Layout component

`@import 'package:angular_components/css/material/material';

a:link, a:visited, a:active, a:hover { color: $mat-white; text-decoration: none; } `

[nshahan]

This exact text snippet is in the example application and it is working there. https://github.com/dart-lang/angular_components_example/blob/master/lib/src/app_layout_demo/app_layout_demo.scss#L22-L25

Are you having a problem building? Does your application load? Maybe the specificity on your css selector is not high enough so it is being overridden by the default?

[treyerl]

SASS Mixins don't work for me, unfortunately.

1. I create a project using stagehand web-angular
2. I try to run webdev serve and have to update and add a few dependencies to make it work. Currently my pubspec.yaml looks like:

environment:
  sdk: '>=2.1.0 <3.0.0'

dependencies:
  angular: ^5.2.0
  angular_components: ^0.13.0

dev_dependencies:
  sass_builder: ^2.1.3
  angular_test: ^2.2.0
  build_runner: ^1.7.0
  build_test: ^0.10.3
  build_web_compilers: ^2.0.0
  build_daemon: ^2.1.0
  pedantic: ^1.0.0
  test: ^1.5.1

3. I open lib/app_components.css and add the line: @import 'package:angular_components/css/material/material';

4. webdev serve fails with

[SEVERE]build_web_compilers:entrypoint on web/main.dart: Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

`import 'package:angular_components/css/material/material.shim.dart' as import0;` from test_ang_dart_sass|lib/app_component.css.shim.dart at 1:1

5. searching the internet, but not finding anything. I also tried to add a build.yaml containing

targets:
  $default:
    builders:
      angular_components|scss_builder:
        enabled: True

Didn't help. So yes, please Demonstrate how to use SASS to customize the layout!

[nshahan]

I open lib/app_components.css and add the line: @import 'package:angular_components/css/material/material';

Just to double check, are you editing lib/app_components.css or lib/app_components.scss? Those imports will only work in .scss files.

It sounds like you are looking at both responses here. https://stackoverflow.com/questions/50609938/use-scss-style-files-within-angulardart-5-and-dart-2/50631951#50631951

The accepted solution is all you should need and please see the comment I left on the other response.

[treyerl]

I am a bit late, but your help was very much appreciated! Thank you!

[Dkrinker]

@nshahan,

I am newbie here, but am experiencing the same issues @treyerl above is having when I import the following in my .scss file:

@import 'package:angular_components/css/material/material';

It complains:

/Users/davidkrinker/.pub-cache/bin/sass wakeup_component.scss:wakeup_component.css Error: Can't find stylesheet to import. ╷ 1 │ @import 'package:angular_components/css/material/material'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ wakeup_component.scss 1:9 root stylesheet

Process finished with exit code 65

My pubspec.yaml looks like this:

---

name: ct
description: A web app for CasaTunes using Angular Dart and Material Design
# version: 1.0.0
# homepage: https://www.casatunes.com

environment:
  sdk: '>=2.7.0 <3.0.0'

dependencies:
  angular: ^6.0.0-alpha+1
  angular_components: ^0.14.0-alpha+1
  angular_router: ^2.0.0-alpha+24

dev_dependencies:
  angular_test: ^2.3.0
  build_runner: ^1.7.0
  build_test: ^0.10.8
  build_web_compilers: ^2.3.0
  pedantic: ^1.8.0
  test: ^1.6.0
  sass_builder: ^2.1.3
  casatunes_rest:
    path: /Users/davidkrinker/Development/CasaTunes REST API/dart/api

Any suggestions?

[nshahan]

1. Where is your .scss file located with respect to the pubspec.yaml file you posted?
2. What did you run to get that error?

[Dkrinker]

@nshahan

1: lib/src/wakeup/wakeup_component.scss 2: Filewatcher for .scss files in WebStorm

[nshahan]

The "Dart" style package imports like the one you are using are not supported by sass. They are custom imports that are supported in the Dart build ecosystem and only work with the use of sass_builder. Instead of using the scss file watcher in webstorm you need to run your dart build. The .css files will be generated in that process because you added the development dependency on sass_builder.

All of that said, there are known issues with the angular_components package and the recent dart SDKs so the build might fail for other reasons with the version of the SDK that you described in your pubspec.yaml.

[Dkrinker]

Thx for your help. That resolved it. Also, the reason I went with the latest packages was support for Dart 2. Will there be an angular_component refresh soon? Thanks again

[donrady]

It is not correct in examples or angulardart.dev website, here is solution what is working for me. As @nshahan said, with new angular_components there are also some changes, so just try to find in .dart_tool/build/generated what are you looking for.

1. surprise in styleUrls its different css filename (not with .scss.css, just CSS)

@Component(
  selector: 'my-app',
  templateUrl: 'app_component.html',
  styleUrls: [
    'package:angular_components/app_layout/layout.scss.css',
    'app_component.css',
  ],
  directives: [
    DeferredContentDirective,
    MaterialButtonComponent,
    MaterialIconComponent,
    MaterialPersistentDrawerDirective,
    MaterialTemporaryDrawerComponent,
    MaterialToggleComponent,
  ],
)

2. surprise in app_component.scss, without lib in path @import 'package:angular_components/app_layout/mixins';

3. I am using this command pub run build_runner serve --verbose

Package versions:

analyzer 0.37.1+1 (0.39.8 available)
  angular 6.0.0-alpha+1
  angular_ast 0.5.11
  angular_compiler 0.4.5
  angular_components 0.14.0-alpha+1
  angular_forms 2.1.4
  angular_router 2.0.0-alpha+24
  angular_test 2.4.0
  archive 2.0.13
  args 1.6.0
  async 2.4.1
  bazel_worker 0.1.21+1 (0.1.23+1 available)
  boolean_selector 2.0.0
  bootstrap_sass 4.5.0
  build 1.2.2 (1.3.0 available)
  build_config 0.4.2
  build_daemon 2.1.4
  build_modules 2.9.0 (2.10.0 available)
  build_resolvers 1.2.1 (1.3.9 available)
  build_runner 1.9.0 (1.10.0 available)
  build_runner_core 5.1.0 (5.2.0 available)
  build_test 1.0.0 (1.2.0 available)
  build_web_compilers 2.10.0 (2.11.0 available)
  built_collection 4.3.2
  built_value 7.1.0
  charcode 1.1.3
  checked_yaml 1.0.2
  cli_repl 0.2.0+1
  code_builder 3.3.0
  collection 1.14.12
  convert 2.1.1
  coverage 0.13.9
  crypto 2.1.5
  csslib 0.16.1
  dart_internal 0.1.9
  dart_style 1.2.10 (1.3.6 available)
  fixnum 0.10.11
  front_end 0.1.21+1 (0.1.29 available)
  glob 1.2.0
  graphs 0.2.0
  html 0.14.0+3
  http 0.12.1
  http_multi_server 2.2.0
  http_parser 3.1.4
  intl 0.15.8 (0.16.1 available)
  io 0.3.4
  js 0.6.1+1
  json_annotation 3.0.1
  kernel 0.3.21+1 (0.3.29 available)
  logging 0.11.4
  matcher 0.12.6
  meta 1.1.8
  mime 0.9.6+3
  mockito 4.1.1
  multi_server_socket 1.0.2
  node_interop 1.1.1
  node_io 1.1.1
  node_preamble 1.4.9
  observable 0.22.2
  package_config 1.9.3
  package_resolver 1.0.10
  pageloader 3.3.0
  path 1.7.0
  pedantic 1.9.0
  pool 1.4.0
  protobuf 0.13.16+1 (1.0.1 available)
  pub_semver 1.4.4
  pubspec_parse 0.1.5
  quiver 2.1.3
  sass 1.26.7
  sass_builder 2.1.3
  scratch_space 0.0.4+2
  shelf 0.7.5
  shelf_packages_handler 2.0.0
  shelf_static 0.2.8
  shelf_web_socket 0.2.3
  source_gen 0.9.4+6 (0.9.5 available)
  source_map_stack_trace 2.0.0
  source_maps 0.10.9
  source_span 1.7.0
  stack_trace 1.9.3
  stream_channel 2.0.0
  stream_transform 1.2.0
  string_scanner 1.0.5
  sync_http 0.2.0
  term_glyph 1.1.0
  test 1.14.6
  test_api 0.2.16
  test_core 0.3.6
  timing 0.1.1+2
  tuple 1.0.3
  typed_data 1.1.6
  vm_service 4.0.4
  watcher 0.9.7+15
  web_socket_channel 1.1.0
  webdriver 2.1.2
  webkit_inspection_protocol 0.7.3
  yaml 2.2.1