如何将 Astroturf 与 Create React App 一起使用？答案

【问题标题】：How can I use Astroturf with Create React App?如何将 Astroturf 与 Create React App 一起使用？
【发布时间】：2018-12-06 14:55:13
【问题描述】：

我尝试使用它的 babel 插件，但是没有用。

我也在使用 craco 来扩展/自定义 Create React App，但我对 Webpack 的了解不足以让 craco 与 Astroturf 一起使用。

【问题讨论】：

标签： reactjs webpack babeljs create-react-app astroturf

【解决方案1】：

要使astroturf 正常工作，您应该推送一条由Create React App webpack 规则生成的新规则：

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

使用react-app-rewired，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 的情况下

【讨论】：

【解决方案2】：

我发现 Anton 的回答不适用于我的项目 - 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 扩展加载程序，而不是覆盖。此外，我发现使用 astroturf 意味着 import './Foo.css' 不再起作用 - astroturf.css 的自定义扩展和 webpack 模块规则可以将 astroturf 与构建链的其余部分隔离开来。

这是我的依赖项，以防将来 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",

【讨论】：