Как я могу использовать Astroturf с приложением Create React?

Question

Я пытался использовать его плагин Babel, но это не сработало.

Я также использую craco для расширения / настройки приложения Create React, но я не знаю достаточно Webpack для работы craco с Astroturf.

Answer 1

Я обнаружил, что ответ Антона не работает для моего проекта - загрузчик astroturf перезаписал встроенный загрузчик от CRA. Я добился успеха с этим config-overrides.js:

const { override, getBabelLoader, addWebpackModuleRule } = require("customize-cra");

const addAstroturf = plugin => config => {
  const babel = getBabelLoader(config);
  babel.loader = [
    { loader: babel.loader, options: babel.options },
    { loader: 'astroturf/loader', options: { extension: '.astroturf.css' } }
  ];
  babel.options = undefined;
  return config;
};

module.exports = override(
  addWebpackModuleRule({
    test: /\.astroturf\.css$/,
    use: ['style-loader', 'astroturf/css-loader'],
  }),
  addAstroturf()
);

В addAstroturfфункция - это настраиваемое переопределение CRA, которое расширяет загрузчик с помощью astroturf вместо перезаписи. Кроме того, я обнаружил, что использование астротурфа означает import './Foo.css' больше не работает - настраиваемое расширение и правило модуля веб-пакета для astroturf.css работать, чтобы изолировать астротурф от остальной части цепочки сборки.

Вот мои зависимости, на случай, если это изменится для CRA в будущем:

"create-react-app": "^4.0.0",
"astroturf": "^0.10.5",
"customize-cra": "^1.0.0",
"react": "^17.0.1",
"react-app-rewired": "^2.1.6",

Answer 2

Чтобы заставить работать astroturf, вы должны выдвинуть одно новое правило, сгенерированное Create React App Правила веб-пакета:

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

С реакцией-приложение-перемонтировано, config-overrides.js будет выглядеть так:

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

С craco должно быть похоже

Замечания: .module.scss следует заменить на .module.css в случае простой CSS