Angular Dart - 使用 sass 文件 [英] Angular Dart - Using sass files

问题描述

我正在尝试使用 Angular Dart 设置 sass，但我有点迷茫，找不到 2016 年以后的文档(很好的文档)

I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)

我目前的结构如下:

但是我不能引用 main.css 文件，因为它没有找到，如果在一个组件中我放了这样的东西styleUrls: ['lib/assets/sass/main.scss']

However I cannot reference a main.css file as it is not found and if in a component I put something like this styleUrls: ['lib/assets/sass/main.scss']

webdev serve 命令失败

The webdev serve command fails

我的 pubscpec 是

My pubscpec is

dependencies:
  angular: ^5.0.0
  angular_components: ^0.9.0
  bootstrap_sass: any

dev_dependencies:
  angular_test: ^2.0.0
  sass_builder: ^2.1.1
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  mockito: ^3.0.0
  test: ^1.3.2

我无法弄清楚出了什么问题以及我应该使用的结构

I cannot figure out what's wrong and also the structure I should use

我应该放入我的顶级组件 main.scss(或编译器 main.css)而不设置任何其他文件引用，还是应该将它包含在每个组件中?以及如何在运行 webdev serve 时生成此编译文件

Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve

谢谢，亚历克斯

推荐答案

因此 styleUrls 的引用应该始终是已编译的 css 而不是 Sass 文件.此外，Urls 需要相对于文件或包格式.所以无论是main.css"还是package:your_project/assets/sass/main.css"

So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'

我还建议不要有单独的资产目录.我倾向于发现将 sass 文件放在组件旁边更容易维护.

I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.

AngularDart 默认也有样式封装；这意味着默认情况下 CSS 不会泄漏到组件之外.鉴于此，我发现将 CSS 放在该组件的本地并靠近该组件会更好.您会发现这是角度组件和图库上的模式.

AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.

关于组件和图库的一个小说明.他们使用样式 style.scss.css 而不是 style.css 这打破了 Sass 的惯例.其背后的原因是我们可以快速判断 CSS 文件的来源.它是手写的，还是来自 Sass.这是通过在 build.yaml 文件中设置不同来实现的.我认为你不应该为你的项目这样做.

One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.

这篇关于Angular Dart - 使用 sass 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！