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

Jan Vladimir Mostert 发表于 Dev

扬·弗拉基米尔·莫斯特尔

我以前从未使用过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 {
    ...
}

主应用程序在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
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：飞镖”

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
- ...

阿达贝托·拉克鲁兹（Adalberto Lacruz）

一月，感谢尝试less_dart。

less_dart是服务器端的编译器/转换器。它读取您的web / alm.less文件并生成web / alm.css。

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

（对于use 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);

作为build_mode: dart恢复，您必须添加到变压器配置并搜索build/web/alm.css

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。