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服务时如何生成这个编译文件

谢谢，Alexi

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文件中设置不同的设置来实现的。我不认为你应该为你的项目做这件事。