Question

我想在Dart项目中使用Sass（用于某些嵌套和文件串联），然后将autoprefixer应用于结果CSS。

在pubspec.yaml我确实有那些依赖项和变换器。 TL; DR我正在尝试使用sass_builder（它可以自行运行; https://pub.dartlang.org/packages/sass_builder）和postcss_transformer（https://pub.dartlang.org/packages/postcss_transformer）：

dependencies:

dev_dependencies:
  browser: '>=0.10.0 <0.11.0'
  dart_to_js_script_rewriter: '^1.0.1'
  postcss_transformer: '^0.1.1'
  sass_builder: '^1.1.2'

transformers:
- dart_to_js_script_rewriter
- sass_builder
- postcss_transformer:
    arguments:
    - use: autoprefixer
    - autoprefixer.browsers: '> 1%'

然而，即使变形金刚的使用，至少我相信，好，它只是不能合作OK：

"C:\Program Files\Dart\dart-sdk\bin\pub.bat" serve web --port=62806
Loading source assets...
Loading dart_to_js_script_rewriter, sass_builder and postcss_transformer transformers...
Serving klubFITpp_titani web on http://localhost:62806
[web] GET Served 4 assets.
[Info from Dart2JS]:
Compiling klubFITpp_titani|web/main.dart...
Build error:
Transform Postcss on klubFITpp_titani|web/style/alfa.css threw error: SystÃ©m nemÅ¯Å¾e nalÃ©zt uvedenÃ½ soubor.

  Command: postcss --use autoprefixer --autoprefixer.browsers "> 1%"
package:postcss_transformer/postcss_transformer.dart 65  PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31               _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206                               new Future.sync
package:$pub/serialize/transformer.dart 30               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                          respond.<fn>
dart:async/future.dart 206                               new Future.sync
package:$pub/serialize.dart 150                          respond
package:$pub/serialize/transformer.dart 17               _serializeTransformer.<fn>
dart:async/zone.dart 1307                                _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330                          _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257                          _BufferingStreamSubscription._add
dart:async/stream_controller.dart 796                    _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 667                    _StreamController._add
dart:async/stream_controller.dart 613                    _StreamController.add
dart:isolate-patch/isolate_patch.dart 151                _RawReceivePortImpl._handleMessage

package:postcss_transformer/postcss_transformer.dart 65  PostcssTransformer.apply
===== asynchronous gap ===========================
package:$pub/serialize/transformer.dart 31               _serializeTransformer.<fn>.<fn>.<fn>
dart:async                                               new Future.sync
package:$pub/serialize/transformer.dart 30               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                          respond.<fn>
dart:async                                               new Future.sync
package:$pub/serialize.dart 150                          respond
package:$pub/serialize/transformer.dart 17               _serializeTransformer.<fn>
[web] GET style/alfa.css => Could not find asset klubFITpp_titani|web/style/alfa.css.
[Info from Dart2JS]:
Took 0:00:04.000418 to compile klubFITpp_titani|web/main.dart.
Build completed with 1 errors.

我正在寻找关于如何连接这两个变换器或正确运行Autoprefixer的解决方案。我也可以使用postcss安装node等，我现在用postcss_transformer转换器。最好是使用pub build / pub watch，例如。使用一些Dart变压器左右。

我使用Windows 10. postcss在命令行中正常工作。

Answer 1

所以我让这个工作，但我不确定你的配置究竟是什么不起作用。我必须得到这个工作：

a）postcss命令需要与autoprefixer一起工作。我用这个命令安装：

npm install -g postcss-cli autoprefixer

b）然后我在命令行上测试了它以确保它有效。

我完全使用了你的pubspec.yaml。

我使用的web / index.scss是：

$primary-color: #333;

body {
  color: $primary-color;
}

a {
  color: blue;
}

.grid {
  grid-gap: 10px;
}

.one {
  grid-column: 1/3;
  grid-row: 1;
}

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

输出结果为：

body {
  color: #333;
}

a {
  color: blue;
}

.grid {
  grid-gap: 10px;
}

.one {
  grid-column: 1/3;
  grid-row: 1;
}

.example {
  display: grid;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: linear-gradient(to bottom, white, black);
}

/*# sourceMappingURL=*/

这是在Mac上。所以配置是可能的。希望这有助于一些人。

请注意，在新的build_runner系统中，这将无法正常工作，因为它会覆盖新系统中不允许的文件。可以通过指定不同的输出扩展而不是使用相同的输入扩展来解决此问题。

Dart中的Sass和Autoprefixer

1 个答案: