I am trying to figure out how to use .scss files in my AngularDart project.
My app structure so far looks like this:
-lib
-src
-signin_component
-signin_component.dart
-singin_component.html
-signin_component.scss
-signin_component.scss.css
-route_paths.dart
-routes.dart
-app_component.css
-app_component.dart
-app_component.html
The pubspec.yaml file contains the following:
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.0.0
angular_components: ^0.12.0
angular_forms: ^2.0.0
angular_router: ^2.0.0-alpha+19
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.0.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
I'm trying to add style to the singin_component.html
file but nothing I've done is working. The singin_component.dart
file has the following:
import 'package:angular/angular.dart';
import 'package:angular_components/material_icon/material_icon.dart';
@Component(
selector: 'app-signin',
templateUrl: 'signin_component.html',
styleUrls: const [
'signin_component.scss.css',
'package:angular_components/app_layout/layout.scss.css'
],
directives: [
MaterialIconComponent
]
)
class SigninComponent{
}
I've read several post about this on stackoverflow. Some references are:
- Use SCSS style files within AngularDart 5 and Dart 2
- Angular Dart - Using sass files
- Is Dart integrated with SASS?
- Importing SCSS partials in Angular Dart
I have tried almost everything recommended on the posts above but still, nothing works. At this point, I'd rather ask if someone here can guide me. I have little experience with dart. I'm learning AngularDart and I feel I'm missing something that I just can't see.