sass_builder 2.1.3
sass_builder: ^2.1.3 copied to clipboard

Dart native
Flutter Android iOS Linux macOS Windows

Transpile sass files using the "build" package.

sass_builder #

Build Status

Transpile sass files using the build package and the dart implementation of sass.

Attention: Transformer has been removed in v2.0.0. #

The transformer provided by this package has been removed. The pub build and pub serve commands have been replaced by build_runner in version 2.0.0-dev.51.0 of the Dart SDK.

Usage #

1. Create a pubspec.yaml file containing the following code:

    # update to the latest version
    bootstrap_sass: any
    # update to the latest versions
    sass_builder: ^2.1.2
    build_runner: ^1.0.0

2. Create web/main.scss containing the following code:

@import "sub";
@import "package:bootstrap_sass/scss/variables";

.a {
  color: blue;

.c {
  color: $body-color;

3. Create web/_sub.scss containing the following code:

.b {
  color: red;

4. Create web/index.html containing the following code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
<div class="a">Some Text</div>
<div class="b">Some Text</div>
<div class="c">Some Text</div>

5. Run pub run build_runner serve and then go to localhost:8080 with a browser and check if the file web/main.css was generated containing:

.b {
  color: red;

.a {
  color: blue;

.c {
  color: #373a3c;

Builder Options #

To configure options for the builder see the build_config README.

  • outputStyle: Supports expanded or compressed. Defaults to expanded in dev mode, and compressed in release mode.

Example that compresses output in dev mode:

          outputStyle: compressed