代码之家 › 专栏 › 技术社区 › DMJ

在角镖中导入SCSS部分

angular-dart dart sass

DMJ · 技术社区 · 6 年前

我正在用角镖(我的第一个严肃的项目)做一个项目。我熟悉SCSS,并在其他“正常”非角度非飞镖相关项目中使用过它。然而,AngularDart中的SCSS的行为方式与我习惯的不同,这让我有点困惑。

_mixins.scss :

@import 'mixins';

在我的角度飞镖项目中,我试着做类似的事情。我创建的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 但我还是试过了:

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

错误:找不到要导入的样式表。

所以,我又做了些谷歌搜索,结果把我的scss部分文件从 lib/src/widgets/ 我打电话给一个新文件夹 lib/assets/scss/

总而言之,如何创建scss部分文件并将其导入组件的scss文件?另外,你把它放在哪里?

(也有切点关系,但目前不太重要,您建议如何创建适用于所有组件的全局规则?)

提前感谢所有能帮忙的人!

2 回复 | 直到 6 年前

Standaa - Remember Monica 5 年前

dart sass将遵循包语法和导入规则。Partials确实有效,您可以在这里看到: https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/material_button.scss

资产语法从来没有真正起飞,我认为大多数工具可能不支持它在这个时候。只需将资源与其他源代码一起放入lib中。

我不确定dart sass是否遵守src约定,即不应该使用包语法导入它。这可能是问题的一部分。

在哪里放地球仪。我倾向于赞同这样的观点,即您不想污染全局空间,因此可以为公共变量和mixin使用公共导入,并在需要时在组件中使用这些导入。可以理解,对某些人来说,这可能有点沉重,但我从事的是真正的大型项目,因此没有全球CSS来处理事情,省去了很多麻烦。你可以在这里看到这种模式: https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/_mixins.scss

也就是说,另一个策略是在根html页面中链接一个常规的scss/css文件,该文件将具有通用的选择器/样式,这些选择器/样式将应用于所有地方。因为它在封装空间之外,所以它将应用于所有匹配的对象。

user8773215 user8773215 6 年前

不知道你这里有什么问题,但是:

在pubspec.yaml中注册Sass dev_dependencies:

dev_dependencies: sass_builder: ^2.1.1

然后,在.scss文件中放入:

最后,在组件文件中,在 @Component() :

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

这是 .css文件 不 .scss文件 .

有关详细信息,请参阅

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

把这一行包括在你的主要 .scss 文件:

@import '_partial.scss';

_partial.scss 文件,精确 !important 在每一处房产之后 需要覆盖 .

这应该行得通,至少,对我来说是如期的。