sass - 在Angular Dart中导入SCSS局部

Question

我正在用Angular Dart(我的第一个认真的人)构建一个项目。我熟悉SCSS，并将其用于其他“正常”的非 Angular 非 Dart 相关项目中。但是，AngularDart中的SCSS的行为方式与以往不同，这让我有些困惑。

我现在正在努力的事情是如何导入局部。在“普通” scss中，我将执行以下操作来导入_mixins.scss:

@import 'mixins';

在我的有角 Dart 项目中，我尝试做类似的事情。我创建的mixin文件位于一个目录中，因此我尝试了以下操作:

@import '../mixins';

那没用。确切的错误消息是 Error: Can't find stylesheet to import.。所以，我用谷歌搜索了一下:

@import '/src/components/widgets/mixins';

没运气。它告诉我 only "package" and "asset" schemes supported。所以我尝试了这个:

@import 'package:dbClient/src/components/widgets/mixins';

它继续告诉我 "package:" URLs aren't supported on this platform.我从未见过 asset URL，并且不确定那是什么，但是我还是尝试了一下:

@import 'asset:dbClient/src/components/widgets/mixins';

这使我回到了 Error: Can't find stylesheet to import.
因此，我做了一些谷歌搜索，最终将我的scss部分文件从 lib/src/widgets/移到了一个名为 lib/assets/scss/的新文件夹中。但是，我似乎仍然无法弄清楚如何将其导入到组件的scss文件中。

总结起来，如何创建一个scss局部文件并将其导入到组件的scss文件中？另外，你放在哪里？

(同时也与切线相关，但目前关注度较小，您将推荐什么作为创建适用于所有组件的全局规则的最佳方法？)

预先感谢任何可以提供帮助的人!

Answer 1

dart-sass将遵循包语法和导入规则。局部变量绝对有效，您可以在这里看到:
https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/material_button.scss

Assets 语法从未真正起步，我认为目前大多数工具可能都不支持它。只需将 Assets 与其他源代码一起放入lib中。

我不确定dart-sass是否遵守src约定，不应使用包语法将其导入。那可能是问题的一部分。

关于放置全局变量的位置。我倾向于您不希望污染全局空间的想法，因此对通用变量和混合输入具有通用导入，并在需要时在组件中使用它们。可以理解，对于某些人来说，这些可能有些繁重，但是我从事的是非常大的项目，因此，避免将全局CSS弄得一团糟，这让我们头疼不已。您可以在此处看到该模式:https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/_mixins.scss

也就是说，另一种策略是您可以在根html页面中链接一个常规的scss / css文件，该文件将具有适用于所有地方的通用选择器/样式。由于它在封装空间之外，因此将应用于所有匹配的内容。