使用CRACO+Cypress时遇Module parse failed错误：未识别@字符

核心错误点 #

你的配置存在三个关键问题：

1. 路径匹配错误：配置里的include: [path.resolve(__dirname, 'src', 'sass')]指向了不存在的src/sass目录，实际项目样式目录是src/scss（从别名@styles和报错的导入路径可确认），导致新加的Loader规则完全没匹配到目标文件。
2. Cypress未集成Craco配置：Cypress默认不会读取Craco的Webpack配置，仍使用默认规则，自然无法处理SCSS文件。
3. Webpack规则添加方式不当：直接将新规则追加到module.rules，可能被原有规则覆盖或优先级冲突，正确做法是替换原有SCSS规则而非新增。

修正步骤 #

1. 修复Craco配置中的路径与规则逻辑

修改craco.config.js，修正路径匹配并替换原有SCSS规则：

const path = require('path');

const sassRegex = /\.(scss)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

module.exports = {
  webpack: {
    extensions: ['ts', 'tsx', 'js', 'jsx'],
    alias: {
      '@layout': path.resolve(__dirname, 'src/components/Layout'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@lib': path.resolve(__dirname, 'src/lib'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@styles': path.resolve(__dirname, 'src/scss'),
      '@common': path.resolve(__dirname, 'src/components/Common'),
      '@icons': path.resolve(__dirname, 'src/components/Common/Icons'),
      '@inputs': path.resolve(__dirname, 'src/components/Common/Inputs'),
      '@assets': path.resolve(__dirname, 'src/assets'),
    },

    configure: (webpackConfig, { env, paths }) => {
      // 定位原有SCSS规则并替换
      const sassRuleIndex = webpackConfig.module.rules.findIndex(
        rule => rule.test?.toString() === sassRegex.toString()
      );

      const overrideSassLoaderConfiguration = {
        test: sassRegex,
        exclude: sassModuleRegex,
        include: [path.resolve(__dirname, 'src/scss'), path.resolve(__dirname, 'src/components')],
        use: ['style-loader', 'css-loader', 'sass-loader'],
      };

      if (sassRuleIndex !== -1) {
        webpackConfig.module.rules[sassRuleIndex] = overrideSassLoaderConfiguration;
      } else {
        webpackConfig.module.rules.push(overrideSassLoaderConfiguration);
      }

      return webpackConfig;
    },
  },
};

2. 配置Cypress使用Craco的Webpack设置

在项目根目录创建/修改cypress.config.js，集成Craco配置：

const { defineConfig } = require('cypress');
const cracoConfig = require('./craco.config.js');
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const getReactScriptsWebpackConfig = require('react-scripts/config/webpack.config');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 基于Craco配置生成适配Cypress的Webpack规则
      const webpackOptions = cracoConfig.webpack.configure(
        getReactScriptsWebpackConfig('development'),
        { env: 'development' }
      );
      on('file:preprocessor', webpackPreprocessor({ webpackOptions }));
    },
  },
});

3. 安装必要依赖

确保所有相关Loader和预处理器已安装：

npm install --save-dev sass-loader sass css-loader style-loader @cypress/webpack-preprocessor

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