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, making sure to use the latest
published versions:
http_archive(
name = "io_bazel_rules_sass",
# Make sure to check for the latest version when you install
url = "https://github.com/bazelbuild/rules_sass/archive/1.26.3.zip",
strip_prefix = "rules_sass-1.26.3",
sha256 = "9dcfba04e4af896626f4760d866f895ea4291bc30bf7287887cefcf4707b6a62",
)
# Setup Bazel NodeJS rules.
# See: https://bazelbuild.github.io/rules_nodejs/install.html.
# Setup repositories which are needed for the Sass rules.
load("@io_bazel_rules_sass//:defs.bzl", "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", serif;
$modern-font-stack: Constantia, "Lucida Bright", serif;
shared/_colors.scss
$example-blue: #0000ff;
$example-red: #ff0000;
shared/BUILD
package(default_visibility = ["//visibility:public"])
load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
sass_library(
name = "colors",
srcs = ["_colors.scss"],
)
sass_library(
name = "fonts",
srcs = ["_fonts.scss"],
)
hello_world/main.scss
:
@import "shared/fonts";
@import "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("@io_bazel_rules_sass//:defs.bzl", "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