Question

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

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

@import 'mixins';

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

@import '../mixins';

那没有用。确切的错误消息是Error: Can't find stylesheet to import.。因此，我在Google上搜索了一下，并提出了以下建议：

@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/lib/material_button/material_button.scss

资产语法从未真正起过作用，我认为目前大多数工具可能都不支持它。只需将资产与其他源代码一起放入库中即可。

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

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

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

Answer 2

不知道您的问题在哪里，但是：

像这样在您的dev_dependencies:中的pubspec.yaml中注册Sass：

dev_dependencies: sass_builder: ^2.1.1

然后，在您的.scss文件中输入以下内容：

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

最后，在您的组件文件中的@Component()内添加它：

styleUrls: const [ 'name_of_your.css', ])

这是 .css ，而不是 .scss 。

查看更多信息

https://sass-lang.com/dart-sass

更新

在主.scss文件中包含以下行：

@import '_partial.scss';

然后，在您的_partial.scss文件中，在需要覆盖的每个属性之后，精确!important 。

那应该至少对我有用。

在Angular Dart中导入SCSS局部

2 个答案: