在聚合物飞镖应用中使用更少

Question

我以前从未使用过 LESS，但看到 Dart 中有一个适用于它的转换器，我决定将它加入其中。

pubspec.yaml:

dependencies:
  less_dart: any
transformers:
- less_dart:
    entry_point: web/alm.less

我删除了 index.html 中的 styles.css 条目并将其替换为 alm.less:

  <link rel="stylesheet" href="alm.less">

在 alm.less 内，如果我这样做：

* /deep/ core-toolbar .core-selected {
  background-color: #FF5252;
  color: #F5F5F5;
}

我可以看到颜色在变化，但如果我这样做：

@darkPrimaryColor:   #E64A19;

* /deep/ core-toolbar .core-selected {
  background-color: @darkPrimaryColor;
  color: #F5F5F5;
}

那 background-color 切换回默认值并忽略我的 @darkPrimaryColor;

查看 pub build 的输出，它将 LESS 文件直接放入 index.html 而不解析 @darkPrimaryColor;

根据 https://pub.dartlang.org/packages/less_dart，我应该导入两个 dart 文件，它们没有说明确切位置，所以我将它们包含在我的 main-app.dart:

中

import 'package:polymer/polymer.dart';
import 'package:less_dart/less.dart';
import 'package:less_dart/transformer.dart'; 

@CustomTag('main-app')
class MainApp extends PolymerElement {
    ...
}

主App加载如下index.html:

<body unresolved>
  <main-app class="default"></main-app>
  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>

这两个包含导致以下错误，所以我再次删除了它们：

The requested built-in library is not available on Dartium.'package:less_dart/less.dart': error: line 4 pos 1: library handler failed
import 'dart:io';
^: package:less_dart/less.dart

更新:

因此，删除 .pub 并执行 pub get 和 pub 缓存修复没有太大区别。我已经从命令行完成了一个 pub serve 以查看它输出的内容：

pub serve
Loading source assets... 
Loading polymer and less_dart transformers... 
Serving falm web on http://localhost:8080
[Info from less-dart] command: lessc --no-color web/alm.less > web/alm.css
[Info from less-dart] lessc transformation completed in 0.0s

[Warning from ImportInliner on falm|web/index.html]:
line 28, column 3 of web/index.html: Failed to inline stylesheet: Could not find asset falm|web/alm.css.
null. See http://goo.gl/5HPeuP#polymer_26 for details.
<link rel="stylesheet" href="alm.css">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

更新

郑重声明，我使用的是 dart sdk 1.8.3 和 OSX 10.10.1 Yosemite，不知道这是否有帮助。

更新

得到它的工作，非常漂亮的插件一旦它工作了！

所以在我的变压器内部，我必须移动 less_dart 成为第一个变压器，否则聚合物变压器会尝试拾取尚未生成的 alm.css。我也不见了 "build_mode: dart"

dependencies:
  ...
  less_dart: ">=0.1.3 <0.2.0"
transformers:
- less_dart:
    entry_point: web/alm.less
    build_mode: dart
- polymer:
    entry_points: web/index.html
- ...

Answer 1

我很确定你不需要添加

import 'package:less_dart/less.dart';
import 'package:less_dart/transformer.dart';

当你使用变压器时。这适用于您想要从您自己的 Dart 代码调用 CSS 生成的情况（当您不使用转换器时）。

我也很确定您需要导入 alm.css 文件而不是 alm.less 文件。
检查您是否在 .gitignore 文件中排除 css 个文件（参见 http://dartbug.com/20110）
检查您的 packages 目录是否包含 less_dart 符号链接。
删除 .pub 目录和运行 pub cache repair 以删除可能过时的缓存并修复包缓存。

Answer 2

Jan，感谢尝试less_dart。

less_dart 是服务器端的 compiler/transformer。它读取您的 web/alm.less 文件并生成 web/alm.css.

因此，您的 html 文件必须声明：<link rel="stylesheet" href="alm.css">

（要使用 href="alm.less"，您需要支持浏览器转换的原始 javascript 实现（参见 http://lesscss.org）。

你的下一个问题：alm.css 文件是在哪里生成的？

默认情况下，转换器使用选项：'build_mode: less'。它在同一目录中读取 web/alm.less 并写入 alm.css：web/alm.css.

我想您的浏览器正在使用 'build/web/index.html'，因此，您需要在同一目录中使用 alm.css。为此，您需要转换器选项：'build_mode: dart'.

dependencies:
  less_dart: any
transformers:
- less_dart:
    entry_point: web/alm.less
    build_mode: dart

less_dart 包有两个组件：

少编译器（less.dart）
少变压器 (transformer.dart)

编译器可以直接抛命令行使用（lessc在bin目录下）：

pub run lessc web/alm.less web/alm.css

或者在你的 Dart 程序中：

    import 'package:less_dart/less.dart';
...
    List<String> args = [];
    Less less = new Less();
    args.add('-no-color');
    args.add('file.less');
    args.add('file.css');
    less.transform(args);

作为 Resumen，您必须将 build_mode: dart 添加到转换器配置并搜索 build/web/alm.css

在聚合物飞镖应用中使用更少

Using less in a polymer-dart application

css

less

dart

dart-polymer