fix(testing): handle path offsets for angular component testing (#12863)

(cherry picked from commit 5a137d0)

Author: barbados-clemens

e2e/angular-extensions/src/cypress-component-tests.test.ts

@@ -70,7 +70,15 @@ export class BtnStandaloneComponent {
 `
     );
     const btnModuleName = names(usedInAppLibName).className;
+    updateFile(
+      `apps/${appName}/src/app/app.component.scss`,
+      `
+@use 'styleguide' as *;
 
+h1 {
+  @include headline;
+}`
+    );
     updateFile(
       `apps/${appName}/src/app/app.module.ts`,
       `
@@ -135,7 +143,21 @@ import {CommonModule} from '@angular/common';
 
     // make sure assets from the workspace root work.
     createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
+    createFile(
+      'assets/styles/styleguide.scss',
+      `
+    @mixin headline {
+    font-weight: bold;
+    color: darkkhaki;
+    background: lightcoral;
+    font-weight: 24px;
+  }
+  `
+    );
     updateProjectConfig(appName, (config) => {
+      config.targets['build'].options.stylePreprocessorOptions = {
+        includePaths: ['assets/styles'],
+      };
       config.targets['build'].options.assets.push({
         glob: '**/*',
         input: 'libs/assets',

packages/angular/plugins/component-testing.ts

@@ -211,11 +211,21 @@ function normalizeBuildTargetOptions(
         ? joinPathFragments(offset, script)
         : { ...script, input: joinPathFragments(offset, script.input) };
     });
+    if (buildOptions.stylePreprocessorOptions?.includePaths.length > 0) {
+      buildOptions.stylePreprocessorOptions = {
+        includePaths: buildOptions.stylePreprocessorOptions.includePaths.map(
+          (path) => {
+            return joinPathFragments(offset, path);
+          }
+        ),
+      };
+    }
   } else {
     const stylePath = getTempStylesForTailwind(ctContext);
     buildOptions.styles = stylePath ? [stylePath] : [];
     buildOptions.assets = [];
     buildOptions.scripts = [];
+    buildOptions.stylePreprocessorOptions = { includePaths: [] };
   }
   const { root, sourceRoot } =
     buildContext.projectGraph.nodes[buildContext.projectName].data;