如何将Astroturf与Create React App一起使用?

时间:2018-12-06 14:55:14

标签: reactjs webpack babel create-react-app astroturf

我尝试使用其babel插件,但这没用。

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

2 个答案:

答案 0 :(得分:0)

要使astroturf正常工作,您应该将一个新规则推入Create React App Webpack规则中生成:

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

使用react-app-rewiredconfig-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

答案 1 :(得分:0)

我发现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",