如何在 Angular cypress 组件测试中包含 scss 样式

Question

在我的 cypress 组件测试运行程序中从我的 nx monorepo 安装组件时，自定义样式不会应用于已安装的组件。这些样式是 scss 文件，所以我真的不知道如何在安装之前编译/包含这些样式。

谁能深入了解如何解决这个问题？我需要在哪里介入并包含 scss 文件？

预先感谢^^

Answer 1

由于您最初提出这个问题，Angular 支持 + Cypress 文档已经改进了很多。

有一个选项允许您包含包括 SCSS 在内的样式，如本页选项 API所示- 就像在该部分中包含样式的路径一样简单buildOptions。

赛普拉斯.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,
          },
        },
      },
    },
  },
}