Использование SASS в Angular Dart - PullRequest
Новая
       18

Использование SASS в Angular Dart

0 голосов
/ 24 марта 2019

Я пытаюсь понять, как использовать файлы .scss в моем проекте AngularDart.

Моя структура приложения до сих пор выглядит так: 

-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

Файл pubspec.yaml содержит следующее: 

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

Я пытаюсь добавить стиль в файл singin_component.html, но ничего из того, что я сделал, не работает. Файл singin_component.dart имеет следующее: 

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{

}

Я прочитал несколько постов об этом на stackoverflow. Некоторые ссылки:

Я перепробовал почти все, что рекомендовано на постах выше, но все равно ничего не работает. На этом этапе я бы предпочел спросить, может ли кто-нибудь здесь помочь У меня мало опыта с дартсом. Я изучаю AngularDart и чувствую, что мне не хватает чего-то, чего я просто не вижу.

1 Ответ

1 голос
/ 26 марта 2019

Если вы добавите sass_builder: ^2.1.2 к dev_dependencies в вашем проекте, он запустится во время сборки и создаст файл .css для любого вашего файла .scss.

Я бы порекомендовал удалить signin_component.scss.css из вашего исходного каталога. signin_component.css (обратите внимание на расширение) будет сгенерировано во время сборки.

Обновите ваш угловой компонент, включив в него сгенерированный файл .css: 

styleUrls: const [
      'signin_component.css',
      'package:angular_components/app_layout/layout.scss.css'
  ],

Файл, который вы импортируете из пакета angular_components, все еще должен заканчиваться на .scss.css, потому что мы генерируем пользовательское расширение для нашего пакета.

...