Angular Dart - 使用 sass 文件

Question

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

我目前有以下结构：

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

webdev serve 命令失败

我的 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 放在该组件的本地并位于该组件旁边会更好。你会发现那是角度组件和画廊上的图案。

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