Dart中的Sass和Autoprefixer

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%'

但是，即使至少相信变压器的使用情况良好，也无法配合使用：

"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的解决方案。 我也可以使用node安装postcss等，现在可以用于postcss_transformer转换器。 最好是可以使用pub build / pub watch ，例如。 使用一些Dart变压器左右。

我使用postcss在命令行中可以正常工作。

Answer 1

因此，我可以使用它，但是我不确定您配置中的确切内容是否起作用。 我必须让它工作：

a）postcss命令需要与自动前缀一起使用。 我使用以下命令进行安装：

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系统中，这将无法正常工作，因为它将覆盖新系统中不允许的文件。 可以通过指定不同的输出扩展名而不是使用相同的输入扩展名来解决此问题。