我试图找出如何在我的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,我觉得我错过了一些我看不到的东西。
如果将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结尾,因为我们为包生成了自定义扩展。