sass_builder 1.2.0 copy "sass_builder: ^1.2.0" to clipboard
sass_builder: ^1.2.0 copied to clipboard

outdatedDart 1 only

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 to be Removed #

The transformer provided by this package will be deprecated and removed soon. The pub build and pub serve commands are being replaced by build_runner.

Usage #

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

dependencies:
    # update to the latest version
    bootstrap_sass: any
dev_dependencies:
    # update to the latest version
    sass_builder: ^1.0.0
    build_runner: ^0.7.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">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="a">Some Text</div>
<div class="b">Some Text</div>
<div class="c">Some Text</div>
</body>
</html>

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.

Example:

targets:
  $default:
    builders:
      sass_builder:
        options:
          outputStyle: compressed

Wrapped as a Pub Transformer #

To automatically generate .css files when you run pub build or pub serve you can add sass_builder as a transformer in your package.

In your pubspec.yaml add the following code:

dependencies:
  sass_builder ^1.0.0 # update for the latest version
transformers:
- sass_builder

Transformer Options #

  • outputExtension: The extension to use for output files. Defaults to .css.
  • outputStyle: Supports expanded and compressed. Defautls to expanded.

Example:

transformers:
- sass_builder:
    outputExtension: .scss.css
    outputStyle: compressed