Less.js: सोर्समैप्स, प्लगइन्स का उपयोग करते समय मिसिंग चयनकर्ता और समानांतर में कम फ़ाइलों को संकलित करना

@TopGrd जो वास्तव में जाने के लिए पर्याप्त नहीं है, खासकर जब यह एक पैकेज में एक त्रुटि है जिसे कम बनाए नहीं रखता है। क्या आप न्यूनतम टेस्ट केस के साथ टेस्ट रेपो बना सकते हैं? साथ ही, यह त्रुटि तब होती है जब आपके कम कोड को संकलित करने के लिए lessc का उपयोग करते हैं?

V3.13.0 - 3.12.2 के साथ भी इसी तरह की समस्या होने पर मेरे लिए भी काम करना।

यह एक बहुत बड़ी परियोजना है, इसलिए लगभग यह पता लगाना असंभव है कि कम फ़ाइल में यह कहां तक ​​है।

@endbay @TopGrd

मुझे यकीन नहीं है कि यहाँ क्या उम्मीद है। कोई प्रतिलिपि योग्य उदाहरण के साथ, और त्रुटि के साथ कम में ही नहीं फेंक दिया, एक संकल्प में कोई उम्मीद नहीं है। किसी को उस त्रुटि पर एक ब्रेकपॉइंट सेट करने और यह देखने की आवश्यकता होगी कि चयनकर्ता क्या उम्मीद कर रहा था और यह क्यों मौजूद नहीं है।

@TopGrd

एक सुराग, यह कम कोड अमान्य है:

    @root-name: business-bundle
    /* other file */
    .@{root-name} .wrapper{
        /* css... */
    }

@root-name: business-bundle एक अर्ध-उपनिवेश याद कर रहा है। इसलिए यह हो सकता है कि आपके पास कम के शीर्ष पर कुछ लाइब्रेरी हो, जो किसी त्रुटि की उम्मीद कर रही हो, वह किसी को नहीं ढूंढती है, और आगे बढ़ने की कोशिश करती है और लेस के आउटपुट को पार्स करती है, लेकिन इस "लापता चयनकर्ता" त्रुटि के साथ विफल हो जाती है। यह सिर्फ एक अनुमान है, क्योंकि मेरे पास देखने के लिए कोई रेपो नहीं है।

मैं 3.13.0 में इसी तरह की समस्या का सामना कर रहा हूं। (अभी भी एक न्यूनतम प्रजनन का पता लगाने की कोशिश कर रहा है।)

संबंधित कोड इस तरह दिखता है:

// button.less
<strong i="7">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="10">@import</strong> "./vars"; // where <strong i="11">@prefix</strong> is defined

जो इस प्रकार संकलित है:

{
  color: red;
}

:hover {
  color: blue;
}

यह अजीब है कि कोई संकलन त्रुटि नहीं हुई।

@ मैथ्यू-डीन यह एक बहुत बड़ी परियोजना है जहां त्रुटि हुई। मैं इसे एक डेमो में पुन: पेश करने की कोशिश कर रहा हूं

@TopGrd

एक सुराग, यह कम कोड अमान्य है:

  @root-name: business-bundle
    /* other file */
  .@{root-name} .wrapper{
      /* css... */
  }

@root-name: business-bundle एक अर्ध-उपनिवेश याद कर रहा है। इसलिए यह हो सकता है कि आपके पास कम के शीर्ष पर कुछ लाइब्रेरी हो, जो किसी त्रुटि की उम्मीद कर रही हो, वह किसी को नहीं ढूंढती है, और आगे बढ़ने की कोशिश करती है और लेस के आउटपुट को पार्स करती है, लेकिन इस "लापता चयनकर्ता" त्रुटि के साथ विफल हो जाती है। यह सिर्फ एक अनुमान है, क्योंकि मेरे पास देखने के लिए कोई रेपो नहीं है।

@ रूट-नाम: व्यापार-बंडल; क्षमा करें, यह मेरा कोड है। इसका एक अर्ध-उपनिवेश है।

मैं 3.13.0 में इसी तरह की समस्या का सामना कर रहा हूं। (अभी भी एक न्यूनतम प्रजनन का पता लगाने की कोशिश कर रहा है।)

संबंधित कोड इस तरह दिखता है:

// button.less
<strong i="8">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="11">@plugin</strong> "~some-less-plugin"; // where <strong i="12">@prefix</strong> is injected which preprocessing plugins

जो इस प्रकार संकलित है:

{
  color: red;
}

:hover {
  color: blue;
}

यह अजीब है कि कोई संकलन त्रुटि नहीं हुई।

मैं कुछ वैश्विक चर भी इंजेक्ट करने के लिए शैली-संसाधनों-लोडर का उपयोग करता हूं। शायद इससे कुछ लेना-देना हो?

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

मेरा कोड:

डिबगर less.render आउटपुट: कोई चयनकर्ता नहीं

चर @{bundle-root-class} settingBundle । ऐसा लगता है कि पहली पंक्ति में चर संकलित नहीं हैं?

फिर भी एक साधारण प्रजनन का पता नहीं लगा सकते। यह बहुत अजीब है कि जब गर्म मॉड्यूल प्रतिस्थापन चालू हो जाता है और परिवर्तित फ़ाइल का संकलित आउटपुट सही प्रतीत होता है। और समस्या केवल चयनकर्ता प्रक्षेप के लिए होती है:

<strong i="6">@import</strong> "./lib.less";

.@{prefix}-button {
  val: @prefix;
}

इसके संकलन:

{
  val: foo;
}

(नोट पूरे चयनकर्ता गायब है, न केवल प्रक्षेपित भाग।)

@ जस्टीनो

परिवर्तित फ़ाइल का संकलित आउटपुट सही प्रतीत होता है

क्या आप इस पर थोड़ा और विस्तार कर सकते हैं? कम से संकलित आउटपुट सही प्रतीत होता है, लेकिन इसे सही तरीके से प्रतिस्थापित नहीं किया जा रहा है?

यह बहुत अजीब है कि जब गर्म मॉड्यूल प्रतिस्थापन चालू हो जाता है और परिवर्तित फ़ाइल का संकलित आउटपुट सही प्रतीत होता है।

@ जस्टीनो यह एक सहायक सुराग है। यह इस के संकल्प से संबंधित होने की संभावना है: https://github.com/less/less.js/issues/3434

संक्षेप में, ट्री कैशिंग को एक समय के लिए कम से हटा दिया गया था, लेकिन ऐसा लगता था कि कुछ परिदृश्यों में इसका नकारात्मक प्रदर्शन प्रभाव बहुत अधिक था, इसलिए मैंने इसे वापस रख दिया। ऐसा हो सकता है कि लेस इसलिए आयात के कुछ राज्य को रीसेट नहीं कर रहा है। , जो केवल "लाइव" वातावरण में एक समस्या का कारण बनता है जहां कम। मोटे को कई बार कहा जाता है। हम्म, मुझे आश्चर्य है कि अगर मैं प्रजनन में उस सिद्धांत का परीक्षण कर सकता हूं।

@Justineo @TopGrd @endbay

दुर्भाग्य से, मैं अभी भी इस मुद्दे को पुन: पेश नहीं कर सकता हूं, इसलिए यह बहस योग्य नहीं है। Make अगर कोई रेपो बना सकता है जहां यह आसानी से प्रतिलिपि प्रस्तुत करने योग्य है, तो मैं इसके माध्यम से कदम रख सकता हूं।

मैं 3.13.0 में इसी तरह की समस्या का सामना कर रहा हूं। (अभी भी एक न्यूनतम प्रजनन का पता लगाने की कोशिश कर रहा है।)
संबंधित कोड इस तरह दिखता है:

// button.less
<strong i="9">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="12">@plugin</strong> "~some-less-plugin"; // where <strong i="13">@prefix</strong> is injected which preprocessing plugins

जो इस प्रकार संकलित है:

{
  color: red;
}

:hover {
  color: blue;
}

यह अजीब है कि कोई संकलन त्रुटि नहीं हुई।

मैं कुछ वैश्विक चर भी इंजेक्ट करने के लिए शैली-संसाधनों-लोडर का उपयोग करता हूं। शायद इससे कुछ लेना-देना हो?

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

+1

कम @plugin + sourcemap इस समस्या का कारण होगा

@ मैथ्यू-डीन ean

@PengJiyuan आप एक क्लोन करने योग्य रेपो में एक प्रतिलिपि प्रस्तुत करने योग्य उदाहरण बना सकते हैं?

+1

मुझे लगता है कि समस्या इस कोड के कारण होती है। ट्री नोड में गलत fileInfo है, समानांतर के मामले में, जिसके कारण इनपुट स्रोत अपरिभाषित है।

+1

मुझे लगता है कि समस्या इस कोड के कारण होती है। ट्री नोड में गलत fileInfo है, समानांतर के मामले में, जिसके कारण इनपुट स्रोत अपरिभाषित है।

@ मैथ्यू-डीन एक मिनट रुको, हम एक मिनी रेपो बनाते हैं। हम कोड की इस लाइन में स्थित है, आशा है कि आप इसे जल्दी से हल करने में मदद करेंगे ...

+1

मुझे लगता है कि समस्या इस कोड के कारण होती है। ट्री नोड में गलत fileInfo है, समानांतर के मामले में, जिसके कारण इनपुट स्रोत अपरिभाषित है।

कोड की यह लाइन 3.10.0 के बाद से दिखाई दी है

@PengJiyuan आप एक क्लोन करने योग्य रेपो में एक प्रतिलिपि प्रस्तुत करने योग्य उदाहरण बना सकते हैं?

https://github.com/kirazxyun/less-question

यह रेपो समस्या को पुन: उत्पन्न कर सकता है। आप 'एनपीएम रन बिल्ड' के साथ दौड़ सकते हैं, तो डिस्ट फ़ोल्डर में परिणाम देखें।

@PengJiyuan आप एक क्लोन करने योग्य रेपो में एक प्रतिलिपि प्रस्तुत करने योग्य उदाहरण बना सकते हैं?

https://github.com/kirazxyun/less-question

यह रेपो समस्या को पुन: उत्पन्न कर सकता है। आप 'एनपीएम रन बिल्ड' के साथ दौड़ सकते हैं, तो डिस्ट फ़ोल्डर में परिणाम देखें।

@ मैथ्यू-डीन

@ मैथ्यू-डीन हम @plugin का उपयोग

@PengJiyuan यदि आप सही हैं, तो स्रोत मैप बिल्डिंग के काम नहीं करने पर प्रश्न में कोड को चंक को आउटपुट करने में विफल नहीं होना चाहिए। यह इस तरह होना चाहिए:

                if (inputSource === undefined) {
                    this._css.push(chunk);
                    return;
                }

यह एक अल्पकालिक फिक्स होगा, लंबी अवधि के लिए यह पता लगाना होगा कि फाइलों में से एक गलत आयात मानचित्रण क्यों है। (समानांतर में संकलित होने पर इसका पुनः उपयोग किया जा सकता है।)

इसलिए मैं जल्द ही अस्थायी बैंड-सहायता समाधान कर सकता हूं, और इसके बाद के कारण का पता लगाऊंगा।

@PengJiyuan @kirazxyun @Justineo आदि के साथ परीक्षण कर प्रयास करें [email protected]

कम @ 3.13.0-alpha.3 के साथ समस्या हल

@ मैथ्यू-डीन यह काम करता है, धन्यवाद ean

@ मैथ्यू-डीन की पुष्टि है कि समस्या के साथ हल किया जाता है [email protected] , एक आधिकारिक रिलीज के लिए जल्द ही उम्मीद कर

इसे कम@3.13.0-alpha.3 के साथ हल किया

3.13.1 प्रकाशित हुआ

4.0.0 भी प्रकाशित किया गया है, जिसमें यह फिक्स है।