Sass 和 Dart 中的自动前缀

Question

我想在 Dart 项目中使用 Sass（用于某些嵌套和文件连接）然后将自动前缀应用于结果 CSS.

在pubspec.yaml中我确实有那些依赖项和转换器。 TL;DR 我正在尝试使用 sass_builder（它自己工作得很好；https://pub.dartlang.org/packages/sass_builder) and 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 的解决方案。我也可以使用 node 安装 postcss 等，我现在将其用于 postcss_transformer 转换器。最好使用 pub build / pub watch，例如。使用一些 Dart 转换器。

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

Sass 和 Dart 中的自动前缀

Sass and Autoprefixer in Dart

sass

dart

angular-dart

autoprefixer