These build rules are used for building Sass projects with Bazel.
To use the Sass rules, add the following to your WORKSPACE
file to add the external repositories for Sass:
load("/tools/build_defs/sass/sass", "sass_repositories") sass_repositories()
Suppose you have the following directory structure for a simple Sass project:
[workspace]/ WORKSPACE hello_world/ BUILD main.scss shared/ BUILD _fonts.scss _colors.scss
shared/_fonts.scss
$default-font-stack: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", ser if; $modern-font-stack: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liber ation Serif", Georgia, serif;
shared/_colors.scss
$example-blue: #0000ff; $example-red: #ff0000;
shared/BUILD
package(default_visibility = ["//visibility:public"]) load("/tools/build_defs/sass/sass", "sass_library") sass_library( name = "colors", srcs = ["_colors.scss"], ) sass_library( name = "fonts", srcs = ["_fonts.scss"], )
hello_world/main.scss
:
@import "examples/sass/shared/fonts"; @import "examples/sass/shared/colors"; html { body { font-family: $default-font-stack; h1 { font-family: $modern-font-stack; color: $example-red; } } }
hello_world/BUILD:
package(default_visibility = ["//visibility:public"]) load("/tools/build_defs/sass/sass", "sass_binary") sass_binary( name = "hello_world", src = "main.scss", deps = [ "//shared:colors", "//shared:fonts", ], )
Build the binary:
$ bazel build //hello_world INFO: Found 1 target... Target //hello_world:hello_world up-to-date: bazel-bin/hello_world/hello_world.css bazel-bin/hello_world/hello_world.css.map INFO: Elapsed time: 1.911s, Critical Path: 0.01s
sass_binary(name, src, deps=[], output_style="compressed")
Used to generate a CSS artifact from a given src
sass file.
sass_library(name, src, deps=[])
Used to reference sass a collection of sass files that a sass_binary
may depend on (via @import
statements), but should not result in any output targets.