मैंने इसके बेबेल प्लगइन का उपयोग करने की कोशिश की, लेकिन यह काम नहीं किया।
मैं क्रिएट रिएक्ट ऐप को बढ़ाने/अनुकूलित करने के लिए क्रेको का भी उपयोग कर रहा हूं, लेकिन मुझे एस्ट्रोटर्फ के साथ क्रेको को काम करने के लिए पर्याप्त वेबपैक नहीं पता है।
2 जवाब
astroturf को काम करने के लिए आपको Create React App वेबपैक नियमों द्वारा उत्पन्न एक नए नियम पर जोर देना चाहिए:
{
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 को सादे css के मामले में .module.css से बदल दिया जाना चाहिए
मैंने पाया कि एंटोन का जवाब मेरे प्रोजेक्ट के लिए कारगर नहीं था - एस्ट्रोटर्फ लोडर ने 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 के लिए कस्टम एक्सटेंशन और वेबपैक मॉड्यूल नियम एस्ट्रोटर्फ को बाकी बिल्ड चेन से अलग करने का काम करते हैं।
यहाँ मेरी निर्भरताएँ हैं, यदि भविष्य में 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",
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।