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:
git_repository(
name = "io_bazel_rules_sass",
remote = "https://github.com/bazelbuild/rules_sass.git",
tag = "0.0.3",
)
load("@io_bazel_rules_sass//sass:sass.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", 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("@io_bazel_rules_sass//sass:sass.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//sass:sass.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
sass_binary(name, src, deps=[], output_style="compressed")Used to generate a CSS artifact from a given src sass file.
| Implicit Output Targets | |
|---|---|
name.css |
The generated CSS artifact containing all the styles |
name.css.map |
source map that can be used to optionally debug the generated CSS in a browser. |
| Attributes | |
|---|---|
name |
Name, required
A unique name for this rule. This name will also be used as the name of the generated CSS and source map file of this rule. |
src |
Main source file, required
The primary Sass source file that will be compiled to CSS.
|
deps |
list of labels, optional
Each target should be defined using a |
output_style |
string; optional
Defaults to
Can be set to one of the following output styles defined by |
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.
| Attributes | |
|---|---|
name |
Name, required
A unique name for this rule.
|
srcs |
a list of labels, required
|
deps |
list of labels, optional
This could be any other |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent