在 Angular Dart 中使用 SASS答案

【问题标题】：Using SASS in Angular Dart在 Angular Dart 中使用 SASS
【发布时间】：2019-08-14 13:59:30
【问题描述】：

我正在尝试弄清楚如何在我的 AngularDart 项目中使用 .scss 文件。

到目前为止，我的应用程序结构如下所示：

-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，但我觉得我错过了一些我看不到的东西。

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

如果您将sass_builder: ^2.1.2 添加到项目中的 dev_dependencies，它将在构建期间运行并为您拥有的任何 .scss 文件创建一个 .css 文件。

我建议从您的源目录中删除 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 结尾，因为我们会为我们的包生成自定义扩展名。

【讨论】：