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

Question

我正在使用 Dart 2 和 AngularDart 5 .

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

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

我从您可以找到的快速启动应用程序开始 here。

谢谢！

Answer 1

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

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

Answer 2

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

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

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

Answer 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

Use SCSS style files within AngularDart 5 and Dart 2