私は、独自のクラス名をスコープするLinariaを使用しようとしているだけで、これと同じ問題に直面しています。 それが生成するcssファイルは.module.cssで終わらないが、それらは「モジュール」である。 ライブラリと統合する簡単な方法が必要です。

なぜ再びnextjsに切り替えたのですか？

node_modulesの外部でもGlobalCSSを使用できるようにしたいと思います。 これは、CSSモジュールを段階的に採用するのに役立ちます

ええ、これは非常に重要です！ 多くのnpmパッケージはnextjsでは機能しませんが、CRAまたは他のフレームワークでは機能します

@useサポートやsassモジュールなどのdart sassのjs実装でこれを使用しようとしている他の人にとって、node-sassに依存する他のノードモジュールがある場合は、デフォルトの次のセットアップsassの代わりにnode-sassを使用します。 ローカルでは、次のようにして修正しました。

// 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であるという制限は、少し面倒です。

どこでもCSS参照をサポートしない場合は、CSSを_app直接の依存関係（他の場所では参照されていない）からも参照できるようにすることができますか？
すなわち。 インポートに基づいてCSSに決定論的な順序を与える、 _app （および他の場所ではない）で必要な場合は問題ありません。

理想的ではありませんが、私が持っているユースケースは、共有CSSをインポートする共有モジュールをインポートする複数のアプリケーションによって共有される1つのコードベースです。 すべてのアプリケーションについて、_app.jsでこれらの共有CSSインポートを複製するのは嫌です。 現在、それを回避するには、他のモジュールでcssを必要としないため、いくつかの凝ったjsメタプログラミングを行う必要があります。

代わりに、現在のアプローチを機能させたいと思います。つまり、すべての共有CSSをインポートする「AppFactory」があります。 次に、_appはファクトリを使用し、共有CSSの上に独自のCSSをインポートします。

この問題に関連していると思うので、 https：//github.com/vercel/next.js/discussions/13991を追加し

これに+100。 ノードモジュールのcssファイルをコピーしてプロジェクトに貼り付け、それらに.module.cssを追加する必要があります

別の例を示します。

パッケージpdf-viewer-reactjs 、その依存関係にはCSSが必要であり、CSSも_app.jsからインポートする必要があります。

これはアプリ全体のCSSを肥大化させており、この段階での競合についてはよくわかりません。

import'react-quill / dist / quill.snow.css ';
import'react-image-crop / dist / ReactCrop.css ';
import '../../ node_modules / material-design-icons / iconfont / material-icons.css';
import '../../ node_modules / bulma / css / bulma.css';
import '../../ node_modules / bulma-helpers / css / bulma-helpers.min.css';

さらに、以下がコンソールに出力されます。

警告-./node_modules/material-design-icons/iconfont/material-icons.css
node_modules内からグローバルCSSをインポートすることはできません。
続きを読む： https ：
場所：node_modules / pdf-viewer-reactjs / dist / pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
node_modules内からグローバルCSSをインポートすることはできません。
続きを読む： https ：
場所：node_modules / pdf-viewer-reactjs / dist / pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
node_modules内からグローバルCSSをインポートすることはできません。
続きを読む： https ：
場所：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）がバッファーまたは文字列を返しませんでした

こんにちは ！ 誰かがこれをどのように解決しましたか？ そのためにインポートできないノードモジュールが多すぎます。

NextJSのベストプラクティス/意見からの逸脱が懸念される場合は、コンポーネントでグローバルスタイルを使用することを、 next.config.jsを介してアクティブ化するか、グローバルスタイルに対する醜いコンソール警告を表示することができます。

ただし、これはCRA> NextJSから変換するユーザーにとって重要です。 それは私たちにとってブロッカーですb / c切り替えて、CSSモジュールのようなものを段階的に採用することはできません。

まだこれを回避することはできません。 私自身のニーズのために、カスタムCSSハンドラーを使用しましたが、これにより組み込みのCSSサポートが無効になりますが、すべての場合に適したソリューションではない可能性があります。 以下はお勧めできません。パッケージの作成者が整理するまでのみ使用してください。

next.config.js

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

@ abdelrahmantoptal 's SASSでそれを機能させる方法を知っていますか？

CSSで機能するようですが、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ローダーをwebpack構成に追加してみ

      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

私は今、ギャツビーとすぐにNext.jsを捨てました。これは、このような小さいながらも非常にブロックされた、意見の分かれる機能のためです。 このエラーを回避できないため、CKEditor 5のCodeBlockプラグインを使用できなくなりました。 これらの構成を丸で囲む方法は常にあるはずです。

この問題について、@ Timerまたは

同意しました！ ノードモジュールにcssがあることは非常に一般的です。 開発者として、私は他の開発者がノードモジュールをどのように構成するかを制御できません。また、他の開発者は、cssをノードモジュールに入れるとWebフレームワークが壊れるとは思っていません。

@OssiPesonenこれはことがありますか？ この回避策は理想的ではありませんが、それまでの間、問題は解決しました。

@OssiPesonenこれはことがありますか？ この回避策は理想的ではありませんが、それまでの間、問題は解決しました。

これがどのように役立つかわかりませんか？ 問題は、ノードモジュールからいくつかのCSSファイルを手動でインポートする必要があることではありません。 問題は、CSSインポートを実行するnpmパッケージ自体です。 次のような行を含むパッケージ：

import '../theme/stylesheet.css'

next.jsが復讐でクラッシュします。 そして明らかに、メンテナのアドバイスは次のとおりです。

メンテナに連絡して、依存関係のコンパイル済みバージョンを公開するように依頼してください。

メンテナに連絡して、パッケージを非常に速いペースで再コンパイルするように依頼できると想像している人々は、どのようなファンタジーランドに住んでいますか？ これは何週間も誰にも邪魔されます！ このチケットは4ヶ月間開いています。 動きの速いプロジェクトで作業する場合、これは受け入れられません。

来週（カナリア）以内に、CSSをnode_modulesから任意のコンポーネントファイルにインポートできるようになります。 テストの準備ができたら、ここに投稿します。

リリース前に誰かがこれを必要としている場合は、 next-transpile-modulesプラグインを使用して、CSSをインポートしていたnode_modulesからモジュールをトランスパイルすることができました。 私にとって魅力のように働いた。

@BrandonEは、next-transpile-modulesに*.module.cssという名前のモジュールがまだ必要なようです。 それを回避する方法を見つけましたか？

@rjoaopereiraこれがどのように機能するかを深く理解しているとは言えませんが、CSSをインポートしたnode_modulesほとんどは、 @zeit/next-cssプラグインでのみ機能しました。 1つだけがそうではなく、その時点でトランスパイルによって問題が修正されました。 エレガントなソリューションとはほど遠いです。Next.jsの将来のバージョンで、Babel / Webpackの錬金術に費やす時間を減らし、Webアプリケーションの作成に多くの時間を費やせるようになることを願っています。

私はこれを次の変更でほぼ機能させました。

次の9.5.3
next-transpile-modules 4.1.0
感情を込めたファーストパーティのコンポーネント。
cssモジュールとグローバルcssが混在するサードパーティコンポーネント

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はもうありません。 制作作品。
• 私はまだCSSを本番環境でオーバーライドしていますが、開発ではオーバーライドしていません。これが、 https：//github.com/vercel/next.js/issues/11448およびhttps://github.comで説明されているnext-cssを削除する動機でした

@Timerこれに関する更新はありますか？

来週（カナリア）以内に、CSSをnode_modulesから任意のコンポーネントファイルにインポートできるようになります。 テストの準備ができたら、ここに投稿します。

この修正後、コンポーネントからCSSが動的にインポートされますか？

どうもありがとう@Timer

next@^9.5.4-canary.10で、アプリケーションのどこからでもnode_modulesからグローバルCSSをインポートできるようになりました。 これにより、CSSをインポートする必要があるサードパーティのReactライブラリとの相互運用性が向上しますが、アプリケーション全体のバンドルサイズが大きくなることは望ましくありません。

@Timerそのリリースが待ちきれません、あなたの仕事に本当に感謝しています💯❤️

ありがとう@タイマー！

これは現在私にとってブロッキングの問題ですが、今日これをテストしたところ、同じエラーメッセージが表示されました。 単に9.5.4-canary-10にアップグレードする以外に何かありますか？ この例では、サードパーティのlib @ rmwcを使用しようとしています

@johmike次の構文を使用してインポートしていますか？

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

nextの最新バージョンをインストールした後、開発サーバーを再起動しようとしましたか？

@Timerこの機能をnode_modulesフォルダーからCSSファイルをインポートするのに最適です。

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

node_modulesディレクトリ外のグローバル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"をインポートしていますが、失敗しています。

とった。 アプリケーションに直接インポートされたと思いました。 私の悪い。

ここでのコメントから判断すると、これは実際には解決されていないか、解決されていますが、ここの多くの人々は別の問題を報告しています。 多くの人はまだモジュールをインポートできません。モジュールはパッケージ自体からCSSをインポートします（パッケージファイル内のimport style.cssステートメント）。

この修正により、アプリはnode_modules/パスからCSSをインポートできるようになりますが、これを回避する非常に簡単な方法があります。修正されるまで、今のところCSSをアプリにコピーするだけです。 ブロッカーレベルの問題ではありません。 したがって、簡単な解決策がないブロッカーの問題は実際には解決されませんでした。 importステートメントを含むコンポーネントをパッケージ自体に含まれているCSSファイルにインポートすると、アプリがクラッシュします。

@sasivarnan @OssiPesonenあなたは両方とも、このOPの問題で議論され修正されていたものとは異なる問題について話しているようです。

これにより、CSSをアプリケーションにインポートする必要があるライブラリが具体的に修正されます。次に例を示します。

// 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をファーストパーティのコードのように扱う機能です。

@Timer予想されるユースケースをテストしたところ、実際に正常に機能します。

次の構造の一部としてコンポーネントにcssを直接インポートすると、期待どおりに機能し、エラーは発生しません。
ただし、そのコンポーネントを次の構造の外部の別のパッケージに移動し、ビルドしてからそのパッケージをインストールすると、以前と同じエラーにフェイルバックします。

この例では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は、CSSファイルの1つからのunknown token . （ドット）エラーで失敗します。

@タイマー何か考えはありますか？ これは、モノレポと複数のパッケージですぐに機能する必要がありますか？ または、@ team / packageAがnode_modulesからcssをインポートしてから、@ team / packageBにインポートできるように構成する必要があるものは他にありますか？

その動作については、 https：//github.com/vercel/next.js/issues/13282をフォローできます。

[email protected]を使用すると、アプリケーションのどこにでもcssをインポートできます。 しかし、scssファイルでも同じことが可能でしょうか？ ページで実際に使用しているscssファイルのみをインポートしたいと思い

//ページ/_app.tsx
import '../styles/common.scss'

// pages /index.tsxボタンを使用します
import '@mynpm/custom-ui/_Button.scss'

// pages /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
node_modules内からグローバルCSSをインポートすることはできません。
続きを読む： https ：

https://nextjs.org/docs/basic-features/built-in-css-supportの例

エラーを返します：
エラー-/Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
node_modules内からグローバルCSSをインポートすることはできません。
続きを読む： https ：

Next.jsの最新バージョンを使用していることを確認してください。

申し訳ありませんが、前のコメントで指定していません。 バージョン9.5.5を使用しました。 npmから更新されました。

すべての.nextキャッシュをクリアしましたが、期待どおりに機能するようになりました。

エラーはまだバージョン9.5.5で、 _app -> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";