मैंने इसके बेबेल प्लगइन का उपयोग करने की कोशिश की, लेकिन यह काम नहीं किया।

मैं क्रिएट रिएक्ट ऐप को बढ़ाने/अनुकूलित करने के लिए क्रेको का भी उपयोग कर रहा हूं, लेकिन मुझे एस्ट्रोटर्फ के साथ क्रेको को काम करने के लिए पर्याप्त वेबपैक नहीं पता है।

1
Mayank Chauhan 6 पद 2018, 17:55

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 से बदल दिया जाना चाहिए

1
Anton Mokrushin 4 फरवरी 2019, 02:53

मैंने पाया कि एंटोन का जवाब मेरे प्रोजेक्ट के लिए कारगर नहीं था - एस्ट्रोटर्फ लोडर ने 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",
1
James Pettit 2 नवम्बर 2020, 16:53