GitLocker: The Coding Marketplace

Description:

sass builder

sass_builder #

Transpile sass files using the build package and the dart implementation
of sass.
Usage #
1. Create a pubspec.yaml file containing the following code:
dependencies:
# (optional) depend on the latest version of packages providing sass sources
bootstrap_sass: any
dev_dependencies:
# update to the latest versions
sass_builder: ^2.1.2
build_runner: ^2.1.7
copied to clipboard
2. Create web/main.scss containing the following code:
@use "sub";
@use "package:bootstrap_sass/scss/variables" as bootstrap;

.a {
color: blue;
}

.c {
color: bootstrap.$body-color;
}

copied to clipboard
3. Create web/_sub.scss containing the following code:
.b {
color: red;
}

copied to clipboard
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>
copied to clipboard
5. Run dart 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;
}
copied to clipboard
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.
sourceMaps: Whether to emit source maps for compiled css. Defaults to
true in development mode and to false in release mode.

Example that compresses output in dev mode:
targets:
$default:
builders:
sass_builder:
options:
outputStyle: compressed
copied to clipboard