Metro extend @expo/metro-config with sass & svg transformers

Question

我无法在使用 expo 创建的 React Native 项目中运行 eas build -p android。这是我得到的：

It looks like that you are using a custom metro.config.js that does not extend @expo/metro-config.

我的 metro.config.js 文件：

const { getDefaultConfig } = require('@expo/metro-config');

module.exports = (async () => {
    const {
        resolver: { sourceExts, assetExts }
    } = await getDefaultConfig(__dirname);
    return {
        transformer: {
            babelTransformerPath: require.resolve('./transformersBundle.js')
        },
        resolver: {
            assetExts: assetExts.filter(
                (ext) => ext !== 'svg' && ext !== 'scss'
            ),
            sourceExts: [...sourceExts, 'svg', 'scss', 'sass']
        }
    };
})();

transformersBundle.js代码：

var sassTransformer = require('react-native-sass-transformer');
var svgTransformer = require('react-native-svg-transformer');

module.exports.transform = function ({ src, filename, options }) {
    if (filename.endsWith('.scss') || filename.endsWith('.sass')) {
        return sassTransformer.transform({ src, filename, options });
    } /* if (filename.endsWith('.svg')) */ else {
        return svgTransformer.transform({ src, filename, options });
    }
};

Answer 1

您 return 一个新配置，但必须对其进行扩展。像这样：

module.exports = (async () => {
  const config = await getDefaultConfig(__dirname);
  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve('./transformersBundle.js'),
  };

  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg' && ext !== 'scss'),
    sourceExts: [...resolver.sourceExts, 'svg', 'scss', 'sass'],
  };

  return config;
})();

Metro extend @expo/metro-config with sass & svg transformers

Metro extend @expo/metro-config with sass & svg transformers

android

react-native

expo

metro-bundler