将 material ui 集成到 angular bazel 项目中

Question

我有一个问题如何使用 bazel 导入 material ui？

我有全局 styles.scss 文件，这个文件有像 @use '@angular/material' as mat; 这样的导入，我需要做些什么来解决依赖关系。我找到了 here 如何执行此操作的示例

npm_sass_library(
  name = "angular_material_sass_deps",
  deps = ["@npm//@angular/material"],
)

sass_binary(
  name = "my_theme"
  src = "my_theme.scss",
  deps = [":angular_material_sass_deps"],
)

但是不行。错误：

INFO: Invocation ID: fbe608d9-f411-44de-8e7d-3a0326734865
INFO: Analyzed target //browserclient/src:prodapp (0 packages loaded, 0 targets configured).
INFO: Found 1 target...
INFO: From SassCompiler browserclient/src/styles.css:
Error: Can't find stylesheet to import.
  ╷
2 │ @use '@angular/material' as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  browserclient/src/styles.scss 2:1  root stylesheet
ERROR: /Users/yhierts/Desktop/charitize/browserclient/src/BUILD.bazel:22:12: output 'browserclient/src/styles.css' was not created
ERROR: /Users/yhierts/Desktop/charitize/browserclient/src/BUILD.bazel:22:12: output 'browserclient/src/styles.css.map' was not created
ERROR: /Users/yhierts/Desktop/charitize/browserclient/src/BUILD.bazel:22:12: SassCompiler browserclient/src/styles.css failed: not all outputs were created or valid
Target //browserclient/src:prodapp failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 0.396s, Critical Path: 0.01s
INFO: 2 processes: 1 remote cache hit, 1 internal.
FAILED: Build did NOT complete successfully

Answer 1

这应该有效。请注意使解析有效的 include_paths，以便您可以从 @npm 工作区及其 node_modules.

解析包

npm_sass_library 规则正是为此 use-case 构建的。此处有更多详细信息：https://github.com/bazelbuild/rules_sass/commit/57089530cbf87c68bb2f6b803b3d48022f210e35

npm_sass_library(
  name = "angular_material_sass_deps",
  deps = ["@npm//@angular/material"],
)

sass_binary(
  name = "my_theme"
  src = "my_theme.scss",
  include_paths = [
    "external/npm/node_modules",
  ],
  deps = [":angular_material_sass_deps"],
)

my_theme.scss

@use '@angular/material' as mat;

// do something with the theming API

将 material ui 集成到 angular bazel 项目中

Integrate material ui into angular bazel project

bazel

angular