package:sass_builder transpiles Sass files using the build package and
the Dart implementation of Sass.
This package integrates into Dart's build system, so it works after being added as a dev-dependency:
dart pub add dev:build_runner dev:sass_builderNext, create say a web/main.scss containing the following code:
.a {
color: blue;
}Run dart run build_runner build to make this package emit web/main.css.
package:sass_builder mostly works how you'd expect Sass to behave in other
build systems:
- Each
.scssand.sassfile gets compiled to a.cssfile. - For development builds, generated CSS is expanded. For
--releasebuilds, it's emitted in a compressed form. - The builder will not run on input files starting with an underscore. These
files can still be
@use-imported into other Sass files though.
To configure options for the builder see the build_config
README.
outputStyle: Supportsexpandedorcompressed. Defaults toexpandedin dev mode, andcompressedin release mode.sourceMaps: Whether to emit source maps for compiled CSS. Defaults totruein development mode and tofalsein release mode.silenceDeprecations,futureDeprecationsandfatalDeprecationscontrol how Sass handles deprecation warnings.
Example:
targets:
$default:
builders:
sass_builder:
options:
# Emit compressed outputs in both dev and release mode.
outputStyle: compressed
silenceDeprecations:
# Don't warn about @import rules
- import
This package provides the builtin read-string function loading assets from
the build system. It takes an asset URL as a first parameter and an optional
mime type as a second.
When no type is given, it returns the contents of the given asset as a string.
With a mime type, it returns a data: URL:
div::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-image: url(read-string('asset:my_pkg/web/dart.svg', 'image/svg+xml'));
background-size: contain;
background-repeat: no-repeat;
}If you want to use any packages that provide source sass files, add them as
normal pub dependencies.
For example, if you want to use styles from package:bootstrap_sass:
dart pub add bootstrap_sassThen, adapt web/main.scss to contain:
@use "sub";
@use "package:bootstrap_sass/scss/variables" as bootstrap;
.a {
color: blue;
}
.c {
color: bootstrap.$body-color;
}Create web/_sub.scss containing the following code:
.b {
color: red;
}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>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;
}
