NX Monorepo中Angular Cypress组件测试SCSS样式引入方法

方法1：通过Cypress配置文件全局引入SCSS #

• 找到项目根目录或对应子项目下的cypress.config.ts，修改component配置块：

  import { defineConfig } from 'cypress';
  import { nxComponentTestingPreset } from '@nx/cypress/plugins/component-testing';
  
  export default defineConfig({
    component: {
      ...nxComponentTestingPreset(__dirname),
      // 指定自定义支持文件路径
      supportFile: 'src/test-setup.ts',
    },
  });
  

• 在src/test-setup.ts（或你指定的支持文件）中直接导入全局SCSS：

  import '../styles/global.scss'; // 替换为你的全局SCSS实际路径
  

方法2：通过NX项目配置指定样式预处理器 #

• 打开对应子项目的project.json，找到targets.test配置块，添加样式预处理器相关配置：

  {
    "targets": {
      "test": {
        "executor": "@nx/cypress:cypress",
        "options": {
          "component": true,
          "stylePreprocessorOptions": {
            "includePaths": ["libs/ui/src/styles"], // SCSS文件所在目录
            "additionalData": "@import 'globals.scss';" // 全局导入指定SCSS文件
          }
        }
      }
    }
  }
  

方法3：在单个测试文件中导入组件专属SCSS #

如果是某个组件的私有样式，直接在对应测试文件顶部导入：

import './button.component.scss'; // 组件对应的SCSS文件路径
import ButtonComponent from './button.component';

describe('ButtonComponent', () => {
  it('renders correctly', () => {
    cy.mount(ButtonComponent);
    // 测试逻辑
  });
});

额外注意事项 #

• 确保NX项目已安装sass和@nrwl/web依赖，未安装则执行：npm install sass @nrwl/web --save-dev
• 检查SCSS文件路径是否正确，NX Monorepo中需注意相对路径或基于项目根的路径规范

内容的提问来源于stack exchange，提问作者Bambi