在 Angular Dart 中使用 SASS
Using SASS in Angular Dart
我想知道如何在我的 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{
}
我在 Whosebug 上阅读了一些关于此的 post。一些参考文献是:
我已经尝试了上面 post 中推荐的几乎所有方法,但仍然没有任何效果。在这一点上,我宁愿问这里是否有人可以指导我。我对飞镖的经验很少。我正在学习 AngularDart,我觉得我错过了一些我看不到的东西。
如果您将 sass_builder: ^2.1.2
添加到项目中的 dev_dependencies,它将在构建期间 运行 并为任何 .s[=25 创建一个 .css 文件=] 文件。
我建议从您的源目录中删除 signin_component.scss.css
。 signin_component.css
(注意扩展名)将在构建期间生成。
更新您的 angular 组件以包含生成的 .css 文件:
styleUrls: const [
'signin_component.css',
'package:angular_components/app_layout/layout.scss.css'
],
您从 angular_components 包中导入的文件仍然需要以 .scss.css 结尾,因为我们为我们的包生成了自定义扩展名。
我想知道如何在我的 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{
}
我在 Whosebug 上阅读了一些关于此的 post。一些参考文献是:
我已经尝试了上面 post 中推荐的几乎所有方法,但仍然没有任何效果。在这一点上,我宁愿问这里是否有人可以指导我。我对飞镖的经验很少。我正在学习 AngularDart,我觉得我错过了一些我看不到的东西。
如果您将 sass_builder: ^2.1.2
添加到项目中的 dev_dependencies,它将在构建期间 运行 并为任何 .s[=25 创建一个 .css 文件=] 文件。
我建议从您的源目录中删除 signin_component.scss.css
。 signin_component.css
(注意扩展名)将在构建期间生成。
更新您的 angular 组件以包含生成的 .css 文件:
styleUrls: const [
'signin_component.css',
'package:angular_components/app_layout/layout.scss.css'
],
您从 angular_components 包中导入的文件仍然需要以 .scss.css 结尾,因为我们为我们的包生成了自定义扩展名。