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

我以前从未使用过 LESS，但看到 Dart 中有一个变压器，我决定把它混在一起。

Pubspec.yaml：

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

我已经删除了索引中的样式.css条目.html并将其替换为alm.less：

  <link rel="stylesheet" href="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 的说法，我应该导入两个飞镖文件，它们没有说确切的位置，所以我将它们包含在我的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 {
    ...
}

主应用程序在索引中加载如下.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 获取和 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
- ...

Jan，感谢尝试less_dart。

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

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

（

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

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

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

我想您的浏览器正在使用"build/web/index.html"，因此，您需要在同一目录中.css alm。为此，您需要变压器选项："build_mode：飞镖"。

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

less_dart包有两个组件：

更少的编译器（更少.dart）
更少的变压器（变压器.dart）

编译器可以直接抛出命令行（lessc 在 bin 目录中）：

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

或者在您的飞镖程序中：

    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

我很确定你不需要添加

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以删除可能过时的缓存并修复包缓存。

相关内容

最新更新

热门标签：