我尝试使用其babel插件,但这没用。
我也在使用craco来扩展/自定义Create React App,但是我不了解足够的Webpack来使craco与Astroturf一起使用。
答案 0 :(得分:0)
要使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
应该相似
注意:如果使用普通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",