个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 03:18:44 26 4
gpt4 key购买 nike

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

    关于css - 在聚合物 Dart 应用中使用更少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27895919/

    26 4 0
    文章推荐： dart - 旧界面和默认关键字
    文章推荐： gradle - Gradle根项目取决于子项目的构建
    文章推荐： dart - 如何将Dart IO流程设置为将现有Stream用于其stdin？
    文章推荐： dart - 我如何在类中触发一种 onChange 事件
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com