Angular Dart - 使用 sass 个文件

Question

我正在尝试使用 Angular Dart 设置 sass，但我有点迷路，找不到 2016 年以后的文档（一个很好的文档）

我目前有以下结构：

但是我无法引用 main.css 文件，因为找不到它，如果在组件中我放了这样的东西 styleUrls: ['lib/assets/sass/main.scss']

webdev 服务命令失败

我的 pubscpec 是

dependencies:
  angular: ^5.0.0
  angular_components: ^0.9.0
  bootstrap_sass: any

dev_dependencies:
  angular_test: ^2.0.0
  sass_builder: ^2.1.1
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  mockito: ^3.0.0
  test: ^1.3.2

我不知道哪里出了问题，也不知道我应该使用什么结构

我应该放入我的顶级组件 main.scss（或编译器 main.css）并且不设置任何其他文件引用，还是应该在每个组件中包含它？还有当我运行 webdev serve

时如何生成这个编译文件

谢谢，阿列克谢

Answer 1

因此，styleUrls 的引用应该始终是已编译的 css 而不是 Sass 文件。此外，Urls 需要与文件或包格式相关。所以 'main.css' 或 'package:your_project/assets/sass/main.css'

我还建议不要有单独的资产目录。我倾向于发现在组件旁边放置 sass 文件更容易维护。

AngularDart默认也有样式封装；这意味着 CSS 默认情况下不会泄漏到组件之外。鉴于此，我发现最好让 CSS 位于该组件的本地并靠近该组件。您会发现那是 angular 组件和图库上的图案。

关于组件和图库的一个小注释。他们使用模式 style.scss.css 而不是 style.css，这打破了 Sass 的约定。其背后的原因是为了让我们可以快速判断 CSS 文件的来源。它是手写的，还是来自 Sass。这是通过在 build.yaml 文件中进行不同的设置来实现的。不过，我认为您不应该为您的项目这样做。

Angular Dart - 使用 sass 个文件

Angular Dart - Using sass files

sass

dart

angular-dart