在 Angular Dart 中导入 SCSS 部分
Importing SCSS partials in Angular Dart
我正在使用 Angular Dart 构建一个项目（我的第一个正式项目）。我熟悉 SCSS 并在其他 'normal' 非 angular 非 dart 相关项目中使用过它。但是，AngularDart 中的 SCSS 的行为方式与我习惯的不同，这让我有点困惑。
我现在苦恼的是如何导入分音。在 'normal' scss 中，我会做这样的事情来导入 _mixins.scss:
@import 'mixins';
在我的 angular 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 文件中？还有，你把它放在哪里？
（也与切线相关但目前不太关心，您会推荐什么作为创建适用于所有组件的全局规则的最佳方法？）
在此先感谢任何可以提供帮助的人！
不确定你的问题是什么但是：
在 pubspec.yaml 中像这样在 dev_dependencies: 中注册 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.
查看更多信息
更新
在您的 .scss 主文件中包含此行：
@import '_partial.scss';
然后，在您的 _partial.scss 文件中，在每个 属性 之后精确 !important 您 需要覆盖 .
至少应该可以，按预期对我有用。
dart-sass 将遵循包语法和导入规则。部分绝对有效你可以在这里看到：
https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/material_button.scss
资产语法从未真正流行起来，我认为目前大多数工具可能都不支持它。只需将资产与其他源代码一起放入库中即可。
我不确定 dart-sass 是否遵守不应使用包语法导入的 src 约定。这可能是问题的一部分。
关于放置全局变量的位置。我倾向于赞同这样一种观点，即您不想污染全局 space，因此对公共变量和混入具有公共导入，并在需要时在组件中使用它们。可以理解的是，这些对于某些人来说可能有点重量级，但我从事的是非常大的项目，所以没有全局 CSS 搞乱事情可以让我们省去很多麻烦。你可以在这里看到这个模式：https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/_mixins.scss
也就是说，另一种策略是您可以在根 html 页面中链接一个常规 scss/css 文件，该文件将具有适用于所有地方的公共 selectors/styles。由于它在封装 space 之外，因此它将适用于所有匹配的内容。
我正在使用 Angular Dart 构建一个项目（我的第一个正式项目）。我熟悉 SCSS 并在其他 'normal' 非 angular 非 dart 相关项目中使用过它。但是，AngularDart 中的 SCSS 的行为方式与我习惯的不同，这让我有点困惑。
我现在苦恼的是如何导入分音。在 'normal' scss 中，我会做这样的事情来导入 _mixins.scss:
@import 'mixins';
在我的 angular 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 文件中？还有，你把它放在哪里？
（也与切线相关但目前不太关心，您会推荐什么作为创建适用于所有组件的全局规则的最佳方法？）
在此先感谢任何可以提供帮助的人！
不确定你的问题是什么但是：
在 pubspec.yaml 中像这样在 dev_dependencies: 中注册 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.
查看更多信息
更新
在您的 .scss 主文件中包含此行：
@import '_partial.scss';
然后，在您的 _partial.scss 文件中，在每个 属性 之后精确 !important 您 需要覆盖 .
至少应该可以，按预期对我有用。
dart-sass 将遵循包语法和导入规则。部分绝对有效你可以在这里看到： https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/material_button.scss
资产语法从未真正流行起来，我认为目前大多数工具可能都不支持它。只需将资产与其他源代码一起放入库中即可。
我不确定 dart-sass 是否遵守不应使用包语法导入的 src 约定。这可能是问题的一部分。
关于放置全局变量的位置。我倾向于赞同这样一种观点，即您不想污染全局 space，因此对公共变量和混入具有公共导入，并在需要时在组件中使用它们。可以理解的是，这些对于某些人来说可能有点重量级，但我从事的是非常大的项目，所以没有全局 CSS 搞乱事情可以让我们省去很多麻烦。你可以在这里看到这个模式：https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/_mixins.scss
也就是说，另一种策略是您可以在根 html 页面中链接一个常规 scss/css 文件，该文件将具有适用于所有地方的公共 selectors/styles。由于它在封装 space 之外，因此它将适用于所有匹配的内容。