sass_builder 1.2.0
sass_builder: ^1.2.0 copied to clipboard
Transpile sass files using the "build" package.
sass_builder #
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
andpub serve
commands are being replaced bybuild_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
: Supportsexpanded
orcompressed
. Defaults toexpanded
.
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
: Supportsexpanded
andcompressed
. Defautls toexpanded
.
Example:
transformers:
- sass_builder:
outputExtension: .scss.css
outputStyle: compressed