css - 在聚合物 Dart 应用中使用更少

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

最佳答案

一月，感谢尝试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

ALM

css - 在聚合物 Dart 应用中使用更少