title: CSS is not loading for Cypress component testing using angular
body: <p>I am trying to do component testing using Cypress component test runner. The web components are built using stencil. We compile the stencil components and create respective &quot;Angular component&quot; and import them into our projects.</p>
  <p>The component is as expected when launched in the angular app. However when it is mounted, and the tests are executed using cypress, the CSS for these pre built components are not getting loaded.</p>
  <p><code>cypress.json</code></p>
  <pre><code>{
      &quot;component&quot;: {
          &quot;componentFolder&quot;: &quot;src&quot;,
          &quot;testFiles&quot;: &quot;**/*component.spec.ts&quot;
      }
  } 
  </code></pre>
  <p><code>angular.json</code></p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;angulartest&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          },
          &quot;@schematics/angular:application&quot;: {
            &quot;strict&quot;: true
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;nexus&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/angulartest&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;500kb&quot;,
                    &quot;maximumError&quot;: &quot;1mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;2kb&quot;,
                    &quot;maximumError&quot;: &quot;4kb&quot;
                  }
                ],
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;outputHashing&quot;: &quot;all&quot;
              },
              &quot;development&quot;: {
                &quot;buildOptimizer&quot;: false,
                &quot;optimization&quot;: false,
                &quot;vendorChunk&quot;: true,
                &quot;extractLicenses&quot;: false,
                &quot;sourceMap&quot;: true,
                &quot;namedChunks&quot;: true
              }
            },
            &quot;defaultConfiguration&quot;: &quot;production&quot;
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;angulartest:build:production&quot;
              },
              &quot;development&quot;: {
                &quot;browserTarget&quot;: &quot;angulartest:build:development&quot;
              }
            },
            &quot;defaultConfiguration&quot;: &quot;development&quot;
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;angulartest:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;angulartest&quot;,
    &quot;default&quot;: {
      &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
      &quot;version&quot;: 1,
      &quot;newProjectRoot&quot;: &quot;projects&quot;,
      &quot;projects&quot;: {
        &quot;angulartest&quot;: {
          &quot;projectType&quot;: &quot;application&quot;,
          &quot;schematics&quot;: {
            &quot;@schematics/angular:component&quot;: {
              &quot;style&quot;: &quot;scss&quot;
            },
            &quot;@schematics/angular:application&quot;: {
              &quot;strict&quot;: true
            }
          },
          &quot;root&quot;: &quot;&quot;,
          &quot;sourceRoot&quot;: &quot;src&quot;,
          &quot;prefix&quot;: &quot;nexus&quot;,
          &quot;architect&quot;: {
            &quot;build&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
              &quot;options&quot;: {
                &quot;outputPath&quot;: &quot;dist/angulartest&quot;,
                &quot;index&quot;: &quot;src/index.html&quot;,
                &quot;main&quot;: &quot;src/main.ts&quot;,
                &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
                &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
                &quot;assets&quot;: [
                  &quot;src/favicon.ico&quot;,
                  &quot;src/assets&quot;
                ],
                &quot;styles&quot;: [
                  &quot;src/styles.scss&quot;
                ],
                &quot;scripts&quot;: []
              },
              &quot;configurations&quot;: {
                &quot;production&quot;: {
                  &quot;budgets&quot;: [
                    {
                      &quot;type&quot;: &quot;initial&quot;,
                      &quot;maximumWarning&quot;: &quot;500kb&quot;,
                      &quot;maximumError&quot;: &quot;1mb&quot;
                    },
                    {
                      &quot;type&quot;: &quot;anyComponentStyle&quot;,
                      &quot;maximumWarning&quot;: &quot;2kb&quot;,
                      &quot;maximumError&quot;: &quot;4kb&quot;
                    }
                  ],
                  &quot;fileReplacements&quot;: [
                    {
                      &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                      &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                    }
                  ],
                  &quot;outputHashing&quot;: &quot;all&quot;
                },
                &quot;development&quot;: {
                  &quot;buildOptimizer&quot;: false,
                  &quot;optimization&quot;: false,
                  &quot;vendorChunk&quot;: true,
                  &quot;extractLicenses&quot;: false,
                  &quot;sourceMap&quot;: true,
                  &quot;namedChunks&quot;: true
                }
              },
              &quot;defaultConfiguration&quot;: &quot;production&quot;
            },
            &quot;serve&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
              &quot;configurations&quot;: {
                &quot;production&quot;: {
                  &quot;browserTarget&quot;: &quot;angulartest:build:production&quot;
                },
                &quot;development&quot;: {
                  &quot;browserTarget&quot;: &quot;angulartest:build:development&quot;
                }
              },
              &quot;defaultConfiguration&quot;: &quot;development&quot;
            },
            &quot;extract-i18n&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
              &quot;options&quot;: {
                &quot;browserTarget&quot;: &quot;angulartest:build&quot;
              }
            },
            &quot;test&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
              &quot;options&quot;: {
                &quot;main&quot;: &quot;src/test.ts&quot;,
                &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
                &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
                &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
                &quot;assets&quot;: [
                  &quot;src/favicon.ico&quot;,
                  &quot;src/assets&quot;
                ],
                &quot;styles&quot;: [
                  &quot;src/styles.scss&quot;
                ],
                &quot;scripts&quot;: []
              }
            }
          }
        }
      },
      &quot;defaultProject&quot;: &quot;angulartest&quot;
    }
  }
  </code></pre>
  <p><code>package.json</code></p>
  <pre><code>{
    &quot;name&quot;: &quot;angulartest&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
      &quot;test&quot;: &quot;ng test&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/common&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/compiler&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/core&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/forms&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~13.2.0&quot;,
      &quot;@angular/router&quot;: &quot;~13.2.0&quot;,
      &quot;@nexus/angular&quot;: &quot;1.0.0&quot;,
      &quot;@nexus/core&quot;: &quot;1.0.0&quot;,
      &quot;@ngrx/store&quot;: &quot;13.0.2&quot;,
      &quot;core-js&quot;: &quot;^2.6.12&quot;,
      &quot;rxjs&quot;: &quot;~7.5.0&quot;,
      &quot;tslib&quot;: &quot;^2.3.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~13.2.5&quot;,
      &quot;@angular/cli&quot;: &quot;~13.2.5&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~13.2.0&quot;,
      &quot;@cypress/webpack-dev-server&quot;: &quot;^1.8.2&quot;,
      &quot;@types/cypress&quot;: &quot;^1.1.3&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;angular2-template-loader&quot;: &quot;^0.6.2&quot;,
      &quot;cypress&quot;: &quot;^9.5.1&quot;,
      &quot;cypress-angular-unit-test&quot;: &quot;^3.9.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.2&quot;,
      &quot;istanbul-instrumenter-loader&quot;: &quot;^3.0.1&quot;,
      &quot;jasmine-core&quot;: &quot;~3.7.0&quot;,
      &quot;karma&quot;: &quot;~6.3.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;raw-loader&quot;: &quot;1.0.0&quot;,
      &quot;sass-loader&quot;: &quot;^12.6.0&quot;,
      &quot;to-string-loader&quot;: &quot;^1.2.0&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.7&quot;,
      &quot;typescript&quot;: &quot;4.4.2&quot;
    }
  }
  
  </code></pre>
  <p><code>component.spec.ts</code></p>
  <pre><code>/// &lt;reference types=&quot;cypress&quot; /&gt;
  import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
  import { ToastComponent } from './toast.component';
  
  describe('AppComponent', () =&gt; {
    beforeEach(() =&gt; {
      setConfig({
        stylesheet:
          '../../node_modules/@nexus/core/dist/styles.scss',
      });
      {
        initEnv(ToastComponent);
        const fixture = mount(ToastComponent);
      }
    });
  
  
    it('should create', () =&gt; {
  
      cy.get('.nexus-rhythm-2');
    });
  
  });
  </code></pre>
  <p><strong>cypress/plugins/index.js</strong></p>
  <pre><code>/// &lt;reference types=&quot;cypress&quot; /&gt;
  
  /**
   * @type {Cypress.PluginConfig}
   */
  
  const webpackConfig = require('./webpack.config');
  const { startDevServer } = require('@cypress/webpack-dev-server');
  
  module.exports = (on, config) =&gt; {
    on('dev-server:start', (options) =&gt;
      startDevServer({
        options,
        webpackConfig,
      }),
    );
    return config;
  };
  </code></pre>
  <p><strong>Expected</strong>
  <a href="https://i.stack.imgur.com/l8ETf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8ETf.png" alt="enter image description here" /></a></p>
  <p><strong>Actual</strong></p>
  <p><a href="https://i.stack.imgur.com/AXJ2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AXJ2k.png" alt="enter image description here" /></a></p>