如何与一起使用Astro草皮？

Question

我试着用它的babel插件，但没有用。

我也使用craco来扩展/自定义，但是我不知道足够的Webpack让craco与Astro草皮一起工作。

Answer 1

要使星形草皮正常工作，您应该将Create React App webpack规则生成的一条新规则推入：

{
    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，它应该是类似的

注意:对于普通css， .module.scss应替换为.module.css。

Answer 2

我发现Anton的答案不适用于我的项目--天体草皮装载机覆盖了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覆盖，它用星形草皮扩展加载程序，而不是覆盖。此外，我发现使用星际争霸意味着import './Foo.css'不再起作用-- astroturf.css工作的自定义扩展和webpack模块规则将星形草坪与构建链的其余部分隔离开来。

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