dart - 在 Angular Dart 中使用 SASS
问题描述
我想弄清楚如何在我的 AngularDart 项目中使用 .scss 文件。
到目前为止,我的应用程序结构如下所示:
-lib
-src
-signin_component
-signin_component.dart
-singin_component.html
-signin_component.scss
-signin_component.scss.css
-route_paths.dart
-routes.dart
-app_component.css
-app_component.dart
-app_component.html
pubspec.yaml 文件包含以下内容:
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.0.0
angular_components: ^0.12.0
angular_forms: ^2.0.0
angular_router: ^2.0.0-alpha+19
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.0.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
我正在尝试为singin_component.html
文件添加样式,但我所做的一切都没有奏效。该singin_component.dart
文件具有以下内容:
import 'package:angular/angular.dart';
import 'package:angular_components/material_icon/material_icon.dart';
@Component(
selector: 'app-signin',
templateUrl: 'signin_component.html',
styleUrls: const [
'signin_component.scss.css',
'package:angular_components/app_layout/layout.scss.css'
],
directives: [
MaterialIconComponent
]
)
class SigninComponent{
}
我已经在 stackoverflow 上阅读了几篇关于此的文章。一些参考资料是:
- 在 AngularDart 5 和 Dart 2 中使用 SCSS 样式文件
- Angular Dart - 使用 sass 文件
- Dart 是否与 SASS 集成?
- 在 Angular Dart 中导入 SCSS 部分
我已经尝试了上面帖子中推荐的几乎所有内容,但仍然没有任何效果。在这一点上,我宁愿问这里是否有人可以指导我。我对飞镖没什么经验。我正在学习 AngularDart,我觉得我错过了一些我看不到的东西。
解决方案
如果您添加sass_builder: ^2.1.2
到项目中的 dev_dependencies,它将在构建期间运行并为您拥有的任何 .scss 文件创建一个 .css 文件。
我建议signin_component.scss.css
从您的源目录中删除。signin_component.css
(注意扩展名)将在构建期间生成。
更新您的角度组件以包含生成的 .css 文件:
styleUrls: const [
'signin_component.css',
'package:angular_components/app_layout/layout.scss.css'
],
您从 angular_components 包导入的文件仍然需要以 .scss.css 结尾,因为我们为我们的包生成了一个自定义扩展名。
推荐阅读
- drop-down-menu - 如何使下拉菜单与其他菜单项保持一致?
- kubernetes - 如何在不在 Kubernetes 的集群配置中创建死锁的情况下检查准备情况?
- spring - Spring Security OAuth 2.0 Google:在未经授权的请求后重定向到默认 URL 而不是请求的 URL
- python - 如果单词在数据框字典中,则 Python 标志
- python - 解决:AttributeError:“ImmutableDenseNDimArray”对象没有属性“as_independent”
- c++ - 尝试打印给定长度和二叉树字符的排列/可能的单词
- json - 使来自 App.vue 的 JSON 数据在所有视图中都可访问
- jquery - 为什么 jQuery AJAX 返回字符串 [Object blob] 而不是 blob 对象?
- android - 受信任的网络活动是否有可能具有可配置的起始 URL?
- c# - ASP.NET MVC 连接问题(错误:System.Data.SqlClient.SqlException)