Bazel build cannot find Angular 15 SCSS SASS files

Question

We use bazel 6.2.1 and angular 15 (upgrading from a previous version of both) and Aspects.

We got a package "gb-styles", it contains sass files (like _colours.scss) and yes, not sass-compiled yet:

load("//tools:sass.bzl", "sass")
load("//tools:ng.bzl", "ng_esbuild", "ng_project")
package(default_visibility = ["//visibility:public"])

filegroup(
    name = "gb-styles",
    srcs = glob([
       "*.scss",
    ]),
)

Now we have an angular components, which means, .ts file, .html file and scss. file. We need to complile the .scss file at first and then pass it to the angular component. The angular components (styleUrl) referes to the CSS file:

srcs = []
sass_srcs = glob(["**/*.scss"])
sass(
    name = "_sass",
    srcs = sass_srcs,
    visibility = ["//visibility:private"],
    deps  = [
      "//projects/lib/gb-styles",
    ]
)
srcs = srcs + [":_sass"]

ng_project(
    name = "hello-world",
    srcs = srcs + glob(["**/*.ts", "**/*.css", "**/*.html"]),
    deps = [
      "//projects/lib/shared/hello-test",
    ],
     visibility = ["//visibility:public"],
)

It kinda works (or not) because bazel output is:

ERROR: /home/dev/dev/angular-ngc2/projects/demo2/app/hello-world/BUILD.bazel:44:5: in _copy_to_bin rule //projects/demo2/app/hello-world:_sass_copy_srcs_to_bin: 
Traceback (most recent call last):
        File "/home/dev/.cache/bazel/_bazel_dev/0013893d2a164c0ff14bf06131ea4eaf/external/aspect_bazel_lib/lib/private/copy_to_bin.bzl", line 116, column 38, in _copy_to_bin_impl
                files = copy_files_to_bin_actions(ctx, ctx.files.srcs)
        File "/home/dev/.cache/bazel/_bazel_dev/0013893d2a164c0ff14bf06131ea4eaf/external/aspect_bazel_lib/lib/private/copy_to_bin.bzl", line 113, column 36, in copy_files_to_bin_actions
                return [copy_file_to_bin_action(ctx, file, is_windows = is_windows) for file in files]
        File "/home/dev/.cache/bazel/_bazel_dev/0013893d2a164c0ff14bf06131ea4eaf/external/aspect_bazel_lib/lib/private/copy_to_bin.bzl", line 44, column 13, in copy_file_to_bin_action
                fail(_file_in_different_package_error_msg(file, ctx.label))
Error in fail:
Expected to find file _colors.scss in //projects/demo2/app/hello-world, but instead it is in //projects/lib/gb-styles.

To use copy_to_bin, either move _colors.scss to //projects/demo2/app/hello-world, or move the copy_to_bin
target to //projects/lib/gb-styles using:

    buildozer 'new copy_to_bin _colors' //projects/lib/gb-styles:__pkg__
    buildozer 'add srcs _colors.scss' //projects/lib/gb-styles:_colors
    buildozer 'new_load @aspect_bazel_lib//lib:copy_to_bin.bzl copy_to_bin' //projects/lib/gb-styles:__pkg__
    buildozer 'add visibility //projects/demo2/app/hello-world:__subpackages__' //projects/lib/gb-styles:_colors


ERROR: /home/dev/dev/angular-ngc2/projects/demo2/app/hello-world/BUILD.bazel:44:5: Analysis of target '//projects/demo2/app/hello-world:_sass_copy_srcs_to_bin' failed

We are slightly confused about this statement:

Error in fail: Expected to find file _colors.scss in //projects/demo2/app/hello-world, but instead it is in //projects/lib/gb-styles.

It seems to be there is the _colours.scss file but it cannot be accessed by sass because it's not accessible. But we link it as dependency and our expecation is, that this is what dependencies are about: Source files to import / use / convert for the following artefact. We don't understand why the colours.scss is not accessible for sass-compiling our hello-world.component.scss

We've checked the documentation as well and found an example at "filegroup", they used "data" instead of "deps" but this didnt work in our case, we ended up with a different error message ("data is not allowed, use src instead").

Any ideas?

Bazel build cannot find Angular 15 SCSS SASS files

0 Answers0