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

Question

我正在使用 Dart 2 和 AngularDart 5 。

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

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

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

谢谢！

Answer 1

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

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

Answer 2

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

1. 创建一个具有以下内容的build.yaml文件：

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

2. 对styleUrl注释使用以下约定： styleUrls: const ['app_component.scss.css']
3. 在*.scss文件中写懂。

Answer 3

最新版本：

1. 惊喜：styleUrls中使用不同的CSS文件名（不带有.scss.css扩展名，仅为.css；例如app_component.css，但样式在app_component.scss。

2. 惊喜：在app_component.scss中，在路径中不包含lib的情况下导入：

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

1. 我正在使用以下命令：

pub run build_runner serve --verbose

查看包装信息： https://github.com/dart-lang/angular_components/issues/374#issuecomment-636344237