在 AngularDart 5 和 Dart 2 中使用 SCSS 样式文件答案

【问题标题】：Use SCSS style files within AngularDart 5 and Dart 2在 AngularDart 5 和 Dart 2 中使用 SCSS 样式文件
【发布时间】：2018-05-30 16:56:15
【问题描述】：

我正在使用 Dart 2 和 AngularDart 5。

⚠ 我在网上搜索了我的问题，但没有找到满意的答案。

❔ 有人可以解释所有我需要在 AngularDart 应用程序中包含和使用 SCSS 样式文件的步骤吗？

我从快速入门应用程序开始，您可以找到 here。

谢谢！

【问题讨论】：

【解决方案1】：

为 sass_builder: ^2.0.0 添加开发依赖项到您的 pubspec.yaml。
运行pub get 以下载新的依赖项。
创建一个 sass 文件，例如：lib/app_component.scss 并为其添加一些样式。
将已编译 css 样式表添加到lib/app_component.dart 中的@Component 注释： styleUrls: const ['app_component.css'],

css文件会在构建过程中由sass_builder生成。

【讨论】：

【解决方案2】：

如果您使用的是 angluar_components。可以简单地打开它：

创建一个包含以下内容的 build.yaml 文件：

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

【讨论】：

技术上 sass_builder 不包含在构建工具中。它是 angular_components 的依赖项。这种技术确实有效，但是您依赖 sass_builder 包作为通过 angular_components 包的传递依赖。如果您停止使用 angular_components 或从未开始使用，那么这将不起作用。

【解决方案3】：

最新版本：

惊喜：styleUrls 中的 CSS 文件名不同（不带有 .scss.css 扩展名，只是 .css；例如 app_component.css，但样式在 app_component.scss 中）。
惊喜：在app_component.scss中，导入路径中没有lib：

@import 'package:angular_components/app_layout/mixins';

pub run build_runner serve --verbose

【讨论】：