Saya menghadapi masalah yang sama hanya dengan mencoba menggunakan Linaria, yang mencakup nama kelasnya sendiri. Meskipun file css yang dihasilkannya tidak berakhiran .module.css , itu adalah "modul". Saya membutuhkan cara mudah untuk berintegrasi dengan perpustakaan.

mengapa bahkan beralih ke nextjs lagi?

Saya juga ingin dapat menggunakan GlobalCSS di luar node_modules. Ini akan membantu kami secara bertahap mengadopsi Modul CSS

ya ini sangat penting! banyak paket npm tidak bekerja dengan nextjs tetapi bekerja dengan CRA, atau kerangka kerja lainnya

Untuk siapa pun yang mencoba menggunakan ini dengan implementasi js dart sass untuk hal-hal seperti @use support dan modul sass, jika Anda memiliki -any- modul node lain yang memiliki ketergantungan pada node-sass, pengaturan default berikutnya akan menggunakan node-sass alih-alih sass. Secara lokal saya telah memperbaikinya dengan melakukan hal berikut:

// 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');
            }
          }
        })
  }
}

Anda kemudian harus mengimpor file scss Anda di _app.js .

@smurrayatwork ini hacking bukan coding maaf

Juga pembatasan menjadi _app.js secara eksklusif sedikit rumit.

Jika kita tidak akan mendukung referensi CSS di mana pun, bisakah kita membuatnya agar CSS juga dapat direferensikan oleh dependensi langsung _app (yang tidak dirujuk di tempat lain)?
yaitu. Tidak apa-apa jika diperlukan oleh _app (dan tidak di tempat lain) yang akan memberikan CSS urutan deterministik berdasarkan impor.

Ini tidak ideal namun kasus penggunaan yang saya miliki adalah bahwa saya memiliki satu basis kode yang dibagikan oleh beberapa aplikasi yang mengimpor modul bersama yang mengimpor CSS bersama. Saya tidak ingin menduplikasi impor CSS bersama di _app.js untuk setiap aplikasi. Saat ini untuk menyiasatinya, saya harus melakukan beberapa metaprogramming js yang mewah karena kami tidak dapat memerlukan css di modul lain.

Alih-alih, saya ingin pendekatan saya saat ini berfungsi yaitu saya memiliki "Pabrik Aplikasi" yang mengimpor semua CSS bersama. _app kemudian menggunakan pabrik dan mengimpor CSS-nya sendiri di atas CSS yang dibagikan.

Saya menambahkan https://github.com/vercel/next.js/discussions/13991 karena menurut saya ini terkait dengan masalah ini.

+100 untuk ini. Saya harus menyalin dan menempelkan file css modul node ke dalam proyek saya dan menambahkan .module.css pada mereka

Berikut contoh lain.

Dalam kasus paket pdf-viewer-reactjs ketergantungannya memerlukan CSS yang perlu diimpor dari _app.js juga.

Ini membuat CSS membengkak untuk seluruh aplikasi dan saya tidak yakin tentang konflik pada tahap ini.

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

Selain itu, berikut ini adalah output ke konsol:

peringatkan - ./node_modules/material-design-icons/iconfont/material-icons.css
CSS global tidak dapat diimpor dari dalam node_modules.
Baca lebih lanjut: https://err.sh/next.js/css-npm
Lokasi: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
CSS global tidak dapat diimpor dari dalam node_modules.
Baca lebih lanjut: https://err.sh/next.js/css-npm
Lokasi: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
CSS global tidak dapat diimpor dari dalam node_modules.
Baca lebih lanjut: https://err.sh/next.js/css-npm
Lokasi: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/material-design-icons/iconfont/material-icons.css
Pembuatan modul gagal: Kesalahan: Pemuat akhir (./node_modules/next/dist/build/webpack/loaders/error-loader.js) tidak mengembalikan Buffer atau String

./node_modules/bulma/css/bulma.css
Pembuatan modul gagal: Kesalahan: Pemuat akhir (./node_modules/next/dist/build/webpack/loaders/error-loader.js) tidak mengembalikan Buffer atau String

./node_modules/bulma-helpers/css/bulma-helpers.min.css
Pembuatan modul gagal: Kesalahan: Pemuat akhir (./node_modules/next/dist/build/webpack/loaders/error-loader.js) tidak mengembalikan Buffer atau String

Hai ! Apakah seseorang menyelesaikan ini dan bagaimana caranya? Begitu banyak modul simpul yang tidak dapat saya impor karena itu.

Mungkin menggunakan gaya global dalam komponen dapat diaktifkan melalui next.config.js , atau peringatan konsol jelek terhadap gaya global dapat ditampilkan, jika ada kekhawatiran tentang melanggar praktik/pendapat terbaik NextJS.

Tetapi ini penting bagi pengguna yang mengonversi dari CRA > NextJS. Ini adalah penghalang bagi kami karena kami tidak dapat beralih & kemudian secara bertahap mengadopsi hal-hal seperti modul CSS.

Masih tidak bisa menyiasatinya. Untuk kebutuhan saya sendiri, saya menggunakan penangan CSS khusus, tetapi ini menonaktifkan dukungan CSS bawaan tetapi ini mungkin bukan solusi yang baik untuk semua kasus . Di bawah ini tidak disarankan , gunakan hanya sampai penulis paket menyelesaikannya

next.config.js

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

@abdelrahmantoptal 's Apakah Anda tahu cara membuatnya bekerja untuk SASS?

Tampaknya ini akan berfungsi untuk CSS, tetapi menimbulkan kesalahan saat menemukan impor 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 {

jadi saya mencoba menambahkan pemuat SASS ke konfigurasi webpack sebelum menggunakan plugin withCSS:

      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'
        ]
      });

Tapi itu menyebabkan:

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

Saya juga mencoba mengganti @zeit/next-sass , tetapi itu menyebabkan kesalahan yang sama:

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

Adakah saran tentang cara mengubah kode Anda untuk menggunakan SASS?

Seseorang kebetulan berhasil mengimplementasikan https://github.com/balena-io-modules/rendition ?

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

Saya sekarang telah membuang Gatsby dan segera Next.js karena fitur mereka yang kecil, tetapi sangat menghalangi, berpendirian seperti ini. Saya sekarang tidak dapat menggunakan plugin CodeBlock untuk CKEditor 5 karena saya tidak dapat mengatasi kesalahan ini. Harus selalu ada cara untuk melingkari konfigurasi ini.

Akan sangat membantu jika ada berita dari @Timer atau seseorang dari Vercel tentang masalah ini. Ini adalah masalah besar dengan Next.js. Sesuatu direncanakan untuk memperbaiki ini?

Sepakat! Sangat umum untuk memiliki css di modul node. Sebagai seorang pengembang, saya tidak memiliki kendali atas bagaimana pengembang lain menyusun modul simpul mereka, dan pengembang lain tidak berharap bahwa menempatkan css dalam modul simpul akan merusak kerangka kerja web.

@OssiPesonen apakah Anda sudah melihat ini ? Solusi ini tidak ideal, tetapi sementara itu memecahkan masalah bagi saya.

@OssiPesonen apakah Anda sudah melihat ini ? Solusi ini tidak ideal, tetapi sementara itu memecahkan masalah bagi saya.

Saya tidak melihat bagaimana ini membantu? Masalahnya bukan saya harus mengimpor beberapa file CSS secara manual dari modul node. Masalahnya adalah paket npm melakukan impor CSS sendiri. Paket yang menyertakan baris seperti ini:

import '../theme/stylesheet.css'

Akan menyebabkan next.js mogok dengan sepenuh hati. Dan ternyata saran pengelolanya adalah:

Hubungi pengelola dan minta mereka untuk memublikasikan versi terkompilasi dari ketergantungan mereka.

Di dunia fantasi seperti apa orang-orang tinggal di mana mereka membayangkan Anda bisa menghubungi pengelola meminta mereka untuk mengkompilasi ulang paket mereka untuk Anda dengan sangat cepat? Ini akan menghalangi siapa pun selama berminggu-minggu! Tiket ini telah dibuka selama 4 bulan. Itu tidak dapat diterima ketika mengerjakan proyek yang bergerak cepat.

Kami akan mengizinkan impor CSS dari node_modules ke file komponen apa pun dalam minggu depan (di canary)! Kami akan memposting di sini ketika sudah siap untuk diuji.

Jika ada yang membutuhkan ini sebelum rilis, saya dapat menggunakan plugin next-transpile-modules untuk mentranspile modul dari node_modules yang mengimpor CSS. Bekerja seperti pesona bagi saya.

@BrandonE tampaknya next-transpile-modules masih perlu memiliki modul bernama *.module.css . Apakah Anda menemukan cara untuk mengatasinya?

@rjoaopereira Saya tidak bisa mengatakan saya memiliki pemahaman yang mendalam tentang bagaimana semua ini bekerja, tetapi sebagian besar node_modules yang mengimpor CSS hanya bekerja dengan plugin @zeit/next-css . Hanya satu yang tidak, pada titik mana transpiling memperbaiki masalah. Jauh dari solusi yang elegan, dan saya berharap versi Next.js yang akan datang memungkinkan kita menghabiskan lebih sedikit waktu untuk alkimia Babel / Webpack dan lebih banyak lagi untuk membuat aplikasi web.

Saya mendapatkan ini hampir berfungsi dengan perubahan berikut.

9.5.3 selanjutnya
modul-transpile-berikutnya 4.1.0
Komponen pihak pertama dengan emosi.
Komponen pihak ketiga dengan campuran modul css dan css global

scopedcomponents akan diganti dengan komponen pihak ke-3 yang digunakan

//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;
    }
  });
};

Masalah:

• Saya tidak lagi memiliki SSR dalam mode dev. Produksi bekerja.
• Saya masih memiliki CSS yang diganti dalam produksi tetapi tidak di dev, yang merupakan motivasi untuk menghapus css berikutnya seperti yang disebutkan dalam https://github.com/vercel/next.js/issues/11448 dan https://github.com /vercel/next.js/issues/10148

@Timer ada pembaruan tentang ini?

Kami akan mengizinkan impor CSS dari node_modules ke file komponen apa pun dalam minggu depan (di canary)! Kami akan memposting di sini ketika sudah siap untuk diuji.

Apakah akan ada impor dinamis CSS dari komponen setelah perbaikan ini?

Terima kasih banyak @Timer

next@^9.5.4-canary.10 sekarang memungkinkan Anda mengimpor CSS Global dari node_modules di mana saja di aplikasi Anda. Ini meningkatkan interoperabilitas dengan perpustakaan React pihak ketiga yang mengharuskan Anda mengimpor CSS mereka, tetapi tidak ingin itu meningkatkan ukuran bundel untuk seluruh aplikasi Anda.

@Timer Tidak sabar untuk memiliki rilis itu, sangat menghargai pekerjaan Anda ❤️

Terima kasih @Timer !

Ini telah menjadi masalah pemblokiran bagi saya saat ini, namun ketika saya mengujinya hari ini, masih melihat pesan kesalahan yang sama. Apakah ada yang lebih dari sekadar memutakhirkan ke 9.5.4-canary-10? Contoh ini mencoba menggunakan lib pihak ke-3 @rmwc

@johmike Apakah Anda mengimpor menggunakan sintaks berikut??

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

Apakah Anda mencoba memulai ulang server dev setelah menginstal versi terbaru next ?

@Timer Terima kasih banyak untuk fitur ini. Berfungsi bagus untuk mengimpor file CSS dari folder node_modules .

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

Adakah rencana untuk mendukung impor css global di luar direktori node_modules ?

@sasivarnan
Ini berasal dari perpustakaan lain yang mengimpor komponen @rmwc . Perpustakaan itu menggunakan @require("@rmwc/avatar/avatar.css") . Saya mengimpor import {Avatar} from "library/Avatar" dan itu gagal.

@sasivarnan

Ini berasal dari perpustakaan lain yang mengimpor komponen @rmwc . Perpustakaan itu menggunakan @require("@rmwc/avatar/avatar.css") . Saya mengimpor import {Avatar} from "library/Avatar" dan itu gagal.

Mengerti. Saya pikir itu diimpor langsung di aplikasi Anda. Salahku.

Dilihat dari komentar di sini, ini sebenarnya tidak diselesaikan atau diselesaikan tetapi banyak orang di sini melaporkan masalah yang berbeda. Banyak orang masih tidak dapat mengimpor modul, yang mengimpor CSS dari paket itu sendiri (pernyataan import style.css di dalam file paket).

Perbaikan tampaknya memungkinkan aplikasi untuk mengimpor CSS dari jalur node_modules/ , tetapi ada cara yang cukup mudah untuk mengatasinya: cukup salin CSS ke aplikasi Anda untuk saat ini hingga diperbaiki. Ini bukan masalah level pemblokir. Jadi itu tidak benar-benar menyelesaikan masalah pemblokir yang tidak ada solusi mudahnya. Jika Anda mengimpor komponen yang memiliki pernyataan impor ke file CSS yang berisi paket itu sendiri, aplikasi akan mogok.

@sasivarnan @OssiPesonen Anda berdua tampaknya berbicara tentang masalah yang berbeda dari apa yang sedang dibahas dan diperbaiki dalam masalah OP ini.

Ini secara khusus memperbaiki perpustakaan yang mengharuskan Anda mengimpor CSS-nya ke dalam aplikasi Anda, misalnya:

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

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

Apa yang Anda bicarakan adalah duplikat #706 dan #13282, atau kemampuan untuk memperlakukan node_modules seperti kode pihak pertama.

@Timer Saya baru saja menguji kasus penggunaan yang diharapkan dan memang berfungsi dengan baik.

Ketika saya mengimpor css dalam komponen secara langsung sebagai bagian dari struktur berikutnya, ia berfungsi seperti yang diharapkan, tidak ada kesalahan.
Namun jika saya memindahkan komponen itu ke paket lain di luar struktur berikutnya, membangun, dan kemudian menginstal paket itu, gagal kembali ke kesalahan yang sama seperti sebelumnya.

Mungkin ada hal lain yang terjadi, karena saya bahkan tidak menggunakan komponen Avatar dalam contoh ini, saya mengimpor Button namun Avatar adalah kesalahan yang gagal.

Saya juga menambahkan next-transpile-modules karena kami bekerja dari monorepo, tetapi itu tampaknya tidak membantu masalah khusus ini.

Saya membuat ini berfungsi dengan file konfigurasi aneh dari menggali banyak masalah lain di sekitar next-transpile-modules .

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

Saya menghilangkan next-transpile-modules dan ini berhasil. Saya tidak tahu mengapa, sepertinya itu tidak harus melakukan apa-apa?

Saya berbicara terlalu cepat! Meskipun itu berfungsi untuk next dev , next build gagal dengan kesalahan unknown token . (titik) dari salah satu file CSS.

@Timer Ada pemikiran? Haruskah ini bekerja di luar kotak dengan monorepo dan banyak paket? Atau adakah hal lain yang perlu saya konfigurasi agar @team/packageA dapat mengimpor css dari node_modules dan kemudian diimpor ke @team/packageB?

Anda dapat mengikuti https://github.com/vercel/next.js/issues/13282 untuk perilaku itu.

Menggunakan [email protected] dimungkinkan untuk mengimpor css di mana saja di aplikasi saya. Tetapi apakah hal yang sama dapat dilakukan untuk file scss? Saya ingin mengimpor hanya file scss yang sebenarnya saya gunakan di halaman .

// halaman/_app.tsx
import '../styles/common.scss'

// halaman/index.tsx Saya menggunakan Tombol
import '@mynpm/custom-ui/_Button.scss'

// pages/about.tsx Saya menggunakan Carousel
import '@mynpm/custom-ui/_Carousel.scss'

Contoh di https://nextjs.org/docs/basic-features/built-in-css-support

Mengembalikan kesalahan:
kesalahan - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
CSS global tidak dapat diimpor dari dalam node_modules.
Baca lebih lanjut: https://err.sh/next.js/css-npm

Contoh di https://nextjs.org/docs/basic-features/built-in-css-support

Mengembalikan kesalahan:
kesalahan - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
CSS global tidak dapat diimpor dari dalam node_modules.
Baca lebih lanjut: https://err.sh/next.js/css-npm

Pastikan Anda menggunakan Next.js versi terbaru.

Maaf, saya tidak menyebutkannya di komentar sebelumnya. Saya menggunakan versi 9.5.5. baru saja diperbarui dari npm.

Saya membersihkan semua cache .next dan sekarang berfungsi seperti yang diharapkan.

Kesalahan masih ada versi 9.5.5 , di _app --> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";