How to include scss styles in angular cypress component testing

Question

When mounting a component from my nx monorepo in my cypress component test runner, the custom styles are not applied to the mounted component. These styles are scss files, so i dont really know how to compile/include these styles right before mounting it.

Could anyone give an insight on how to solve this problem? Where do i need to step in and include the scss files?

Thanks in advance ^^

Answer 1

Since you originally asked this question Angular support + Cypress docs have improved a lot.

There is an option that allows you to include styles including SCSS, shown on this page Options API - as simple as including a path to your styles in the buildOptions section.

cypress.config.ts

import { defineConfig } from 'cypress'

export default {
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: 'apps/my-app',
          buildOptions: {
            outputPath: 'dist/my-app',
            index: 'apps/my-app/src/index.html',
            main: 'apps/my-app/src/main.ts',
            polyfills: 'apps/my-app/src/polyfills.ts',
            tsConfig: 'apps/my-app/tsconfig.app.json',
            inlineStyleLanguage: 'scss',
            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],

            styles: ['apps/my-app/src/styles.scss'],

            scripts: [],
            buildOptimizer: false,
            optimization: false,
            vendorChunk: true,
            extractLicenses: false,
            sourceMap: true,
            namedChunks: true,
          },
        },
      },
    },
  },
}