Dart Angular, different ways to handle sass. Best practices

As far as I can tell there are two ways to handle sass in my Angular Dart application.

Putting sass_builder in pubspec.yaml, referencing the scss files in components as .css files

example

// in pubspec.yaml
dev_dependencies:
  sass_builder: ^2.1.2

// my component
@Component(
    selector: 'my-component',
    styleUrls: ['my_comp.css'],  // <----- notice extention
    templateUrl: 'my_comp.html',
    directives: [ coreDirectives ],
)
class MyComponent implements {}

Putting a build.yaml file at the root, enabling the angular scss_builder, but this way requires the scss files to be referenced with the extention scss.css

// in Build.yaml
targets:
  $default:
    builders:
      angular_components|scss_builder:
        enabled: True   

// my component
@Component(
    selector: 'my-component',
    styleUrls: ['my_comp.scss.css'],  // <----- notice extention
    templateUrl: 'my_comp.html',
    directives: [ coreDirectives ],
)
class MyComponent implements {}

I've seen a bunch of posts saying that the "right" way is the first way (sass_builder in pubspec).

My issue is that if I code my local packages this way, applications that are built using the build.yaml method for handling sass have errors when importing it. They don't mix well. But if I code my local packages using the build.yaml method, it works for applications using either method. Can someone shed some light on best practices for sass?