How can I use Astroturf with Create React App?

Question

I tried using its babel plugin, but that didn't work.

I am also using craco to extend/customize Create React App, but I don't know enough Webpack to make craco work with Astroturf.

Answer 1

To make astroturf working you should push one new rule to generated by Create React App webpack rules:

{
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    use: [
        {
            loader: 'astroturf/loader',
            options: { extension: '.module.scss' },
        },
    ],
}

With react-app-rewired, config-overrides.js will look like:

module.exports = (config) => {
    config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: [
            {
                loader: 'astroturf/loader',
                options: { extension: '.module.scss' },
            },
        ],
    });
    return config;
};

With craco it should be similar

Note: .module.scss should be replaced with .module.css in case of plain css