मुझे इसी समस्या का सामना करना पड़ रहा है, बस लिनेरिया का उपयोग करने की कोशिश कर रहा हूं, जो अपने स्वयं के वर्ग के नामों को स्कोप करता है। हालांकि यह उत्पन्न होने वाली सीएसएस फाइलें .module.css में समाप्त नहीं होती हैं, वे "मॉड्यूल" हैं। मुझे पुस्तकालय के साथ एकीकृत करने का एक आसान तरीका चाहिए।

नेक्स्टज पर फिर से क्यों स्विच किया?

मैं नोड_मॉड्यूल्स के बाहर GlobalCSS का उपयोग करने में सक्षम होना चाहूंगा। यह हमें सीएसएस मॉड्यूल को क्रमिक रूप से अपनाने में मदद करेगा

हाँ यह बहुत महत्वपूर्ण है! कई एनपीएम पैकेज नेक्स्टज के साथ काम नहीं कर रहे हैं लेकिन सीआरए, या अन्य ढांचे के साथ काम कर रहे हैं

@use समर्थन और एसएएस मॉड्यूल जैसी चीजों के लिए डार्ट एसएएस के जेएस कार्यान्वयन के साथ इसका उपयोग करने की कोशिश कर रहे किसी और के लिए, यदि आपके पास -कोई अन्य नोड मॉड्यूल है जिसमें नोड-एसएएस पर निर्भरता है, तो डिफ़ॉल्ट अगला सेटअप एसएएस के बजाय नोड-एसएएस का उपयोग करेगा। स्थानीय रूप से मैंने इसे निम्नलिखित करके तय किया है:

// example next.config.js
module.exports = {
webpack(config, options) {
  config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            const nestedScss = rule.oneOf.find((one) => {
              return one.test
                && 'some.scss'.match(one.test) 
                && one.issuer 
                && one.issuer.include 
                && one.issuer.include.includes('_app');
            });
            if (nestedScss) {
              const sassLoader = nestedScss.use.find(u => u.loader.includes('sass-loader'));
              // Set implementation to sass instead of node-sass here.
              sassLoader.options.implementation = require('sass');
            }
          }
        })
  }
}

फिर आपको अपनी scss फ़ाइलों को _app.js में आयात करना होगा।

@smurrayatwork यह हैकिंग है कोडिंग नहीं क्षमा करें

साथ ही इस पर विशेष रूप से _app.js होने पर प्रतिबंध थोड़ा बोझिल है।

यदि हम हर जगह सीएसएस संदर्भों का समर्थन नहीं करने जा रहे हैं तो क्या हम इसे बना सकते हैं ताकि सीएसएस को _app की प्रत्यक्ष निर्भरता द्वारा भी संदर्भित किया जा सके (जो कहीं और संदर्भित नहीं हैं)?
अर्थात। यह ठीक है अगर इसकी आवश्यकता _app (और कहीं नहीं) है जो सीएसएस को आयात के आधार पर एक नियतात्मक आदेश देगा।

यह आदर्श नहीं है, हालांकि मेरे पास उपयोग का मामला यह है कि मेरे पास कई अनुप्रयोगों द्वारा साझा किया गया एक कोडबेस है जो एक साझा मॉड्यूल आयात करता है जो साझा सीएसएस आयात करता है। मैं हर एप्लिकेशन के लिए _app.js में उन साझा सीएसएस आयातों को डुप्लिकेट करने से नफरत करता हूं। वर्तमान में इसके आसपास जाने के लिए मुझे कुछ फैंसी जेएस मेटाप्रोग्रामिंग करना होगा क्योंकि हमें अन्य मॉड्यूल में सीएसएस की आवश्यकता नहीं हो सकती है।

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

मैं https://github.com/vercel/next.js/discussions/13991 जोड़ रहा हूं क्योंकि मुझे लगता है कि यह इस मुद्दे से संबंधित है।

इसके लिए +100। मुझे अपने प्रोजेक्ट में नोड मॉड्यूल सीएसएस फाइलों को कॉपी और पेस्ट करना है और उन पर एक .module.css जोड़ना है

यहाँ एक और उदाहरण है।

पैकेज pdf-viewer-reactjs के मामले में इसकी निर्भरता के लिए CSS की आवश्यकता होती है जिसे _app.js से भी आयात करने की आवश्यकता होती है।

यह पूरे ऐप के लिए सीएसएस को फूला रहा है और मैं इस स्तर पर संघर्षों के बारे में निश्चित नहीं हूं।

आयात 'react-quill/dist/quill.snow.css';
आयात 'प्रतिक्रिया-छवि-फसल/जिला/ReactCrop.css';
आयात '../../node_modules/material-design-icons/iconfont/material-icons.css';
आयात '../../node_modules/bulma/css/bulma.css';
आयात '../../node_modules/bulma-helpers/css/bulma-helpers.min.css';

इसके अतिरिक्त निम्नलिखित कंसोल के लिए आउटपुट है:

चेतावनी - ./node_modules/material-design-icons/iconfont/material-icons.css
वैश्विक CSS को node_modules के भीतर से आयात नहीं किया जा सकता है।
और पढ़ें: https://err.sh/next.js/css-npm
स्थान: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
वैश्विक CSS को node_modules के भीतर से आयात नहीं किया जा सकता है।
और पढ़ें: https://err.sh/next.js/css-npm
स्थान: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
वैश्विक CSS को node_modules के भीतर से आयात नहीं किया जा सकता है।
और पढ़ें: https://err.sh/next.js/css-npm
स्थान: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/material-design-icons/iconfont/material-icons.css
मॉड्यूल निर्माण विफल: त्रुटि: अंतिम लोडर (./node_modules/next/dist/build/webpack/loaders/error-loader.js) एक बफर या स्ट्रिंग वापस नहीं किया

./node_modules/bulma/css/bulma.css
मॉड्यूल निर्माण विफल: त्रुटि: अंतिम लोडर (./node_modules/next/dist/build/webpack/loaders/error-loader.js) एक बफर या स्ट्रिंग वापस नहीं किया

./node_modules/bulma-helpers/css/bulma-helpers.min.css
मॉड्यूल निर्माण विफल: त्रुटि: अंतिम लोडर (./node_modules/next/dist/build/webpack/loaders/error-loader.js) एक बफर या स्ट्रिंग वापस नहीं किया

नमस्ते ! क्या किसी ने इसे हल किया और कैसे? इतने सारे नोड मॉड्यूल जो मैं उसके कारण आयात नहीं कर सकता।

हो सकता है कि घटकों में वैश्विक शैलियों का उपयोग next.config.js माध्यम से सक्रिय किया जा सकता है, या वैश्विक शैलियों के खिलाफ एक बदसूरत कंसोल चेतावनी दिखाई जा सकती है, अगर नेक्स्टजेएस की सर्वोत्तम प्रथाओं/राय से टूटने के बारे में चिंता है।

लेकिन यह सीआरए > नेक्स्टजेएस से परिवर्तित होने वाले उपयोगकर्ताओं के लिए महत्वपूर्ण है। यह हमारे लिए एक अवरोधक है b/c हम स्विच नहीं कर सकते हैं और फिर CSS मॉड्यूल जैसी चीजों को क्रमिक रूप से अपना सकते हैं।

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

अगला.config.js

const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
...
module.exports = withPlugins([
...
withCSS,
]);

@abdelrahmantoptal क्या आप जानते हैं कि SASS के लिए यह कैसे काम करता है?

ऐसा प्रतीत होता है कि यह सीएसएस के लिए काम करेगा, लेकिन एसएएसएस आयात का सामना करते समय एक त्रुटि फेंकता है:

error - ./src/components/layouts/Footer.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <strong i="8">@import</strong> 'styles/vars';
| 
| footer {

इसलिए मैंने withCSS प्लगइन का उपयोग करने से पहले वेबपैक कॉन्फ़िगरेशन में एक SASS लोडर जोड़ने का प्रयास किया:

      config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader'
        ]
      });

लेकिन इसके कारण:

error - ./src/components/App.scss
ReferenceError: self is not defined

मैंने @zeit/next-sass प्रतिस्थापित करने का भी प्रयास किया, लेकिन इससे वही त्रुटि हुई:

error - ./src/components/App.scss
ReferenceError: self is not defined

SASS का उपयोग करने के लिए अपने कोड में बदलाव करने के बारे में कोई सुझाव?

किसी ने किसी भी संयोग से सफलतापूर्वक https://github.com/balena-io-modules/rendition लागू किया?

https://github.com/balena-io-modules/rendition/issues/1164

मैंने अब Gatsby और जल्द ही Next.js को उनकी छोटी, लेकिन बहुत अवरुद्ध, राय वाली सुविधाओं जैसे कि इस एक के कारण बाहर कर दिया है। मैं अब CKEditor 5 के लिए CodeBlock प्लगइन का उपयोग करने में असमर्थ हूं क्योंकि मैं इस त्रुटि के आसपास नहीं जा सकता। इन कॉन्फ़िगरेशन को सर्कल करने का हमेशा कोई तरीका होना चाहिए।

इस समस्या के बारे में @Timer या

माना! नोड मॉड्यूल में सीएसएस होना अविश्वसनीय रूप से सामान्य है। एक डेवलपर के रूप में, मेरा इस पर कोई नियंत्रण नहीं है कि अन्य डेवलपर्स अपने नोड मॉड्यूल को कैसे बनाते हैं, और अन्य डेवलपर्स यह उम्मीद नहीं करते हैं कि नोड मॉड्यूल में सीएसएस डालने से वेब फ्रेमवर्क टूट जाएगा।

@OssiPesonen क्या आपने इसे अभी तक देखा है? यह समाधान आदर्श नहीं है, लेकिन इस बीच इसने मेरे लिए समस्या हल कर दी।

@OssiPesonen क्या आपने इसे अभी तक देखा है? यह समाधान आदर्श नहीं है, लेकिन इस बीच इसने मेरे लिए समस्या हल कर दी।

मैं नहीं देखता कि यह कैसे मदद करता है? समस्या यह नहीं है कि मुझे नोड मॉड्यूल से कुछ सीएसएस फ़ाइलों को मैन्युअल रूप से आयात करना है। समस्या npm संकुल है जो CSS को अपने आप में आयात कर रहा है। एक पैकेज जिसमें इस तरह की एक पंक्ति शामिल है:

import '../theme/stylesheet.css'

अगला.जेएस प्रतिशोध के साथ दुर्घटनाग्रस्त हो जाएगा। और जाहिर तौर पर अनुरक्षक की सलाह है:

अनुरक्षक के पास पहुंचें और उनसे अपनी निर्भरता का संकलित संस्करण प्रकाशित करने के लिए कहें।

लोग किस तरह की काल्पनिक भूमि में रहते हैं, जहां वे कल्पना करते हैं कि आप केवल अनुरक्षकों से संपर्क कर सकते हैं, उन्हें बहुत तेज गति से आपके लिए अपने पैकेज को फिर से संकलित करने के लिए कह सकते हैं? यह किसी को भी हफ्तों तक रोकेगा! यह टिकट 4 महीने से खुला है। तेजी से आगे बढ़ने वाली परियोजनाओं पर काम करते समय यह अस्वीकार्य है।

हम अगले सप्ताह (कैनरी पर) के भीतर किसी भी घटक फ़ाइल में node_modules से CSS आयात करने की अनुमति देने जा रहे हैं! जब यह परीक्षण के लिए तैयार होगा तो हम यहां पोस्ट करेंगे।

अगर किसी को रिलीज से पहले इसकी आवश्यकता है, तो मैं सीएसएस आयात करने वाले node_modules से मॉड्यूल को ट्रांसपाइल करने के लिए नेक्स्ट -ट्रांसपाइल-मॉड्यूल प्लगइन का उपयोग करने में सक्षम था। मेरे लिए एक जादू की तरह काम किया।

@BrandonE लगता है अगली transpile-मॉड्यूल अभी भी मॉड्यूल नाम दिया करने की आवश्यकता है *.module.css । क्या आपको इसके आसपास कोई रास्ता मिला?

@rjoaopereira मैं यह नहीं कह सकता कि मुझे इस बात की गहरी समझ है कि यह कैसे काम करता है, लेकिन मेरे अधिकांश node_modules जो कि आयातित CSS केवल @zeit/next-css प्लगइन के साथ काम करते हैं। केवल एक ने नहीं किया, जिस बिंदु पर ट्रांसपिलिंग ने इस मुद्दे को ठीक किया। एक सुंदर समाधान से बहुत दूर, और मुझे आशा है कि Next.js के भविष्य के संस्करण हमें बेबेल / वेबपैक कीमिया पर कम समय और वेब एप्लिकेशन बनाने में अधिक समय व्यतीत करने की अनुमति देंगे।

मुझे यह लगभग निम्नलिखित परिवर्तनों के साथ काम कर रहा है।

अगला 9.5.3
नेक्स्ट-ट्रांसपाइल-मॉड्यूल 4.1.0
भावना के साथ प्रथम पक्ष घटक।
सीएसएस मॉड्यूल और वैश्विक सीएसएस के मिश्रण के साथ तीसरे पक्ष के घटक

scopedcomponents को इस्तेमाल किए जा रहे तीसरे पक्ष के घटकों से बदला जाना है

//next.config.js
const withCustomWebpack = require("./webpack-custom.config");
const withNextCSSOverride = require("./next.config.css");
const withTM = require("next-transpile-modules")(["@scopedcomponents"]);

module.exports = withCustomWebpack(
  withTM(
    withNextCSSOverride({
      poweredByHeader: false
    })
  )
);

///next.config.css.js
const {
  getCssModuleLocalIdent
} = require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent");
const path = require("path");
/**
 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
 */
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      const nextCssLoaders = config.module.rules.find(
        rule => typeof rule.oneOf === "object"
      );

      if (nextCssLoaders) {
        const nextCssLoader = nextCssLoaders.oneOf.find(
          rule =>
            rule.sideEffects === false &&
            regexEqual(rule.test, /\.module\.css$/)
        );

        if (nextCssLoader) {
          /***********************************************************
           * change the rule to match all scopedcomponents css files
           ***********************************************************/
          nextCssLoader.test = /(@scopedcomponents|react\-virtualized)\/.*\.css$/;

          const cssLoader = nextCssLoader.use.find(({ loader }) =>
            loader.includes("css-loader")
          );

          if (cssLoader) {
            /***********************************************************
             * Override the default behaviour for CSS modules discovery
             * auto = true makes webpack search for *.module.css
             * https://webpack.js.org/loaders/css-loader/#auto
             ***********************************************************/
            cssLoader.options.modules.auto = /@scopedcomponents\/.*\.css$/;
            /***********************************************************
             * Nextjs overrides the default mode to "Pure"
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L35
             * Put it back to normal
             ***********************************************************/
            cssLoader.options.modules.mode = "local";
            /***********************************************************************************************************************
             * There is a problem when using components built with css-modules with Nextjs.                                        *
             * NextJS will consume code from `lib` on the server side and from `es` on the client.                                 *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack-config.ts#L374                            *
             * This raises a problem when generating the classes for different environments,                                       *
             * throwing an error of className mismatch due to the hash created being based on the file path                        *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L26  *
             * https://github.com/webpack/loader-utils/blob/v1.4.0/lib/interpolateName.js#L39                                      *
             * To solve this, when generating the classNames for 3rd party components,                                                 *
             * we need to tell cssloader to always use the same path                                                               *                                                                          *
             *                                                                                                                     *
             *  https://github.com/zeit/next-plugins/issues/595                                                                    *
             ***********************************************************************************************************************/
            cssLoader.options.modules.getLocalIdent = (
              context,
              localIdentName,
              localName,
              options
            ) => {
              const newContext = { ...context };
              if (newContext.resourcePath.includes("@scopedcomponents")) {
                newContext.resourcePath = newContext.resourcePath.replace(
                  `${path.sep}es${path.sep}`,
                  `${path.sep}lib${path.sep}`
                );
              }
              return getCssModuleLocalIdent(
                newContext,
                localIdentName,
                localName,
                options
              );
            };
          }
        }
      }

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

समस्या:

• मेरे पास अब देव मोड में SSR नहीं है। उत्पादन कार्य करता है।
• मेरे पास अभी भी उत्पादन में सीएसएस को ओवरराइड किया जा रहा है, लेकिन देव में नहीं, जो कि https://github.com/vercel/next.js/issues/11448 और https://github.com में उल्लिखित अगली-सीएसएस को हटाने की प्रेरणा थी।

@Timer इस पर कोई अपडेट?

हम अगले सप्ताह (कैनरी पर) के भीतर किसी भी घटक फ़ाइल में node_modules से CSS आयात करने की अनुमति देने जा रहे हैं! जब यह परीक्षण के लिए तैयार होगा तो हम यहां पोस्ट करेंगे।

क्या इस सुधार के बाद किसी घटक से CSS का गतिशील आयात होगा?

बहुत बहुत धन्यवाद @ टाइमर

next@^9.5.4-canary.10 अब आपको अपने आवेदन में कहीं भी node_modules से वैश्विक सीएसएस आयात करने की अनुमति देता है। यह तृतीय-पक्ष रिएक्ट लाइब्रेरी के साथ इंटरऑपरेबिलिटी में सुधार करता है जिसके लिए आपको उनके सीएसएस को आयात करने की आवश्यकता होती है, लेकिन यह नहीं चाहते कि यह आपके पूरे एप्लिकेशन के लिए बंडल आकार को बढ़ाए।

@Timer उस रिलीज के लिए इंतजार नहीं कर सकता, वास्तव में आपके काम की सराहना की ❤️

धन्यवाद @ टाइमर !

यह वर्तमान में मेरे लिए एक अवरुद्ध मुद्दा रहा है, हालाँकि जब मैंने आज इसका परीक्षण किया, तब भी वही त्रुटि संदेश दिखाई दे रहा था। क्या इसमें केवल 9.5.4-कैनरी-10 में अपग्रेड करने के अलावा और कुछ है? यह उदाहरण तृतीय पक्ष lib @ rmwc . का उपयोग करने का प्रयास कर रहा है

@johmike क्या आप निम्न सिंटैक्स का उपयोग करके आयात कर रहे हैं ??

import "@rmwc/avatar/avatar.css";

क्या आपने next के नवीनतम संस्करण को स्थापित करने के बाद देव सर्वर को पुनरारंभ करने का प्रयास किया था?

@Timer इस सुविधा के लिए बहुत-बहुत धन्यवाद। node_modules फ़ोल्डर से CSS फ़ाइल आयात करने के लिए बढ़िया काम करता है।

import 'prism-themes/themes/prism-darcula.css';

node_modules dir के बाहर वैश्विक css के आयात का समर्थन करने की कोई योजना?

@sasivarnan
यह किसी अन्य पुस्तकालय से आ रहा है जो @rmwc घटकों को आयात कर @require("@rmwc/avatar/avatar.css") । मैं import {Avatar} from "library/Avatar" आयात कर रहा हूं और वह विफल हो रहा है।

@sasivarnan

यह किसी अन्य पुस्तकालय से आ रहा है जो @rmwc घटकों को आयात कर @require("@rmwc/avatar/avatar.css") । मैं import {Avatar} from "library/Avatar" आयात कर रहा हूं और वह विफल हो रहा है।

समझ लिया। मैंने सोचा था कि यह सीधे आपके आवेदन में आयात किया गया था। मेरी गलती।

यहां टिप्पणियों से देखते हुए, यह वास्तव में हल नहीं हुआ है या इसे हल किया गया है, लेकिन यहां कई लोग एक अलग मुद्दे की रिपोर्ट करते हैं। बहुत से लोग अभी भी मॉड्यूल आयात नहीं कर सकते हैं, जो पैकेज से ही सीएसएस आयात करते हैं (पैकेज फ़ाइल के अंदर एक import style.css स्टेटमेंट)।

फिक्स ऐप को node_modules/ पथ से सीएसएस आयात करने की इजाजत देता है, लेकिन इसके आसपास जाने का एक बहुत आसान तरीका है: बस सीएसएस को अपने ऐप पर तब तक कॉपी करें जब तक कि यह ठीक न हो जाए। यह ब्लॉकर स्तर का मामला नहीं है। इसलिए इसने वास्तव में अवरोधक समस्या का समाधान नहीं किया जिसका कोई आसान समाधान नहीं है। यदि आप एक घटक आयात करते हैं जिसमें एक सीएसएस फ़ाइल में एक आयात विवरण है जिसमें पैकेज में ही शामिल है, तो ऐप क्रैश हो जाता है।

@sasivarnan @OssiPesonen आप दोनों एक अलग मुद्दे के बारे में बात कर रहे हैं जो इस ओपी मुद्दे में चर्चा और तय की जा रही थी।

यह विशेष रूप से उन पुस्तकालयों को ठीक करता है जिनके लिए आपको अपने सीएसएस को अपने आवेदन में आयात करने की आवश्यकता होती है, उदाहरण के लिए:

// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
  return <Slider min={0} max={200} step={10} />;
}

आप जिस बारे में बात कर रहे हैं वह #706 और #13282 का डुप्लिकेट है, या node_modules को प्रथम-पक्ष कोड की तरह व्यवहार करने की क्षमता है।

@ टाइमर मैंने अभी अपेक्षित उपयोग के मामले का परीक्षण किया है और यह वास्तव में ठीक काम करता है।

जब मैं अगली संरचना के हिस्से के रूप में सीधे एक घटक में सीएसएस आयात करता हूं तो यह अपेक्षित काम करता है, कोई त्रुटि नहीं।
हालांकि अगर मैं उस घटक को अगली संरचना के बाहर किसी अन्य पैकेज में ले जाता हूं, तो उस पैकेज को बनाता हूं, और फिर उस पैकेज को स्थापित करता हूं, यह पहले की तरह उसी त्रुटि पर वापस विफल हो जाता है।

यह संभव है कि कुछ और चल रहा हो, क्योंकि मैं इस उदाहरण में Avatar घटक का उपयोग भी नहीं कर रहा हूं, मैं Button आयात कर रहा हूं और फिर भी Avatar विफल त्रुटि है।

इसके अलावा मैंने next-transpile-modules जोड़ा क्योंकि हम एक मोनोरेपो से काम कर रहे हैं, लेकिन यह इस विशेष मुद्दे की मदद नहीं कर रहा था।

मुझे यह एक अजीब कॉन्फ़िगरेशन फ़ाइल द्वारा next-transpile-modules आसपास अन्य मुद्दों के समूह के माध्यम से खुदाई से काम कर रहा है।

const withCSS = require("@zeit/next-css");
module.exports = withCSS();
require.extensions[".css"] = () => {
  return;
};

मैंने next-transpile-modules समाप्त कर दिया और यह काम करता है। मुझे नहीं पता क्यों, ऐसा लगता है कि इसे कुछ नहीं करना चाहिए?

मैं बहुत जल्दी बोल गया! जबकि यह next dev लिए काम करता है, next build सीएसएस फाइलों में से एक से unknown token . (डॉट) त्रुटि के साथ विफल रहता है।

@ टाइमर कोई विचार? क्या यह एक मोनोरेपो और कई पैकेजों के साथ बॉक्स से बाहर काम करना चाहिए? या कुछ और है जिसे मुझे कॉन्फ़िगर करने की आवश्यकता है ताकि @ टीम/पैकेजए नोड_मॉड्यूल से सीएसएस आयात कर सके और फिर @ टीम/पैकेजबी में आयात किया जा सके?

आप उस व्यवहार के लिए https://github.com/vercel/next.js/issues/13282 का अनुसरण कर सकते हैं।

[email protected] का उपयोग करके मेरे आवेदन में कहीं भी सीएसएस आयात करना संभव है। लेकिन क्या एससीएसएस फाइलों के लिए भी ऐसा ही संभव होगा? मैं केवल उन एससीएसएस फाइलों को आयात करना चाहता हूं जिनका मैं वास्तव में एक पृष्ठ पर उपयोग कर रहा हूं।

// पेज/_app.tsx
import '../styles/common.scss'

// पृष्ठ/index.tsx मैं एक बटन का उपयोग करता हूं
import '@mynpm/custom-ui/_Button.scss'

// पृष्ठ/about.tsx मैं एक हिंडोला का उपयोग करता हूं
import '@mynpm/custom-ui/_Carousel.scss'

https://nextjs.org/docs/basic-features/built-in-css-support पर उदाहरण

त्रुटि लौटाता है:
त्रुटि - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
वैश्विक CSS को node_modules के भीतर से आयात नहीं किया जा सकता है।
और पढ़ें: https://err.sh/next.js/css-npm

https://nextjs.org/docs/basic-features/built-in-css-support पर उदाहरण

त्रुटि लौटाता है:
त्रुटि - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
वैश्विक CSS को node_modules के भीतर से आयात नहीं किया जा सकता है।
और पढ़ें: https://err.sh/next.js/css-npm

सुनिश्चित करें कि आप Next.js के नवीनतम संस्करण का उपयोग कर रहे हैं।

क्षमा करें, मैंने इसे पिछली टिप्पणी में निर्दिष्ट नहीं किया था। मैंने संस्करण 9.5.5 का उपयोग किया। बस npm से अपडेट किया गया।

मैंने सभी .next कैशे साफ़ कर दिए हैं और अब यह अपेक्षा के अनुरूप काम करता है।

त्रुटि अभी भी संस्करण 9.5.5 है , _app -> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";