Next.js: [RFC] Dukungan CSS

Saya menebak dengan plugin seperti @zeit/next-sass sudah bekerja dengan modul CSS yang didukung saat ini bahwa .module.scss juga akan berfungsi? Atau apakah frase "Modul CSS murni" hanya berarti .module.css ?

Dukungan Sass berhasil atau menghancurkannya untuk sebagian besar proyek bagi saya.

Plugin @zeit/next-css/sass/less/stylus akan digunakan lagi untuk mendukung RFC ini (dukungan bawaan). Kami masih membahas sejauh mana sass akan menjadi bagian dari inti vs plugin. Pemikiran saya saat ini adalah ketika Anda menambahkan node-sass itu akan mengaktifkan dukungan sass. Mirip dengan apa yang kami lakukan untuk TypeScript. Alasan kami tidak akan menambahkannya sebagai dependensi adalah karena ini cukup besar dan sangat lambat untuk dipasang karena binding asli, dll.

Ini menyenangkan! Saya tersandung oleh nama kelas css yang bertentangan seperti hari ini!

Pertanyaan, bagaimana cara kerjanya dengan TypeScript? Salah satu alasan saya belum mengaktifkan css-module adalah bahwa, mengimpor modul css akan memberikan objek apa pun (mungkin agak ajaib, seperti .foo-bar akan menjadi bidang bernama fooBar ?), yang tidak ramah TS. Karena Next sekarang TS secara default, saya membayangkan kita bisa melakukan yang lebih baik dalam hal ini?

Saya tidak yakin apakah "Secara otomatis memperbaiki flexbugs yang diketahui untuk pengguna" akan menjadi ide yang bagus.

Saya khawatir kita akan berakhir dengan skenario yang membingungkan di mana pustaka komponen pihak ketiga di npm, yang menyertakan stylesheet css, akan berperilaku berbeda di lingkungan nextjs daripada di lingkungan lain (seperti create-react-app).

@TheHolyWaffle memperbaiki

@zenozen Sesuai dengan spesifikasi Modul CSS, ia tidak melakukan apa pun yang mewah bagi Anda. Jika Anda menggunakan nama kelas dengan tanda hubung ( class-name ) Anda perlu mengaksesnya secara eksplisit pada objek.

misalnya

import Everything from './file.module.css'

// later on

Everything['class-name']

Sedangkan untuk TS, kami tidak merencanakan sihir apa pun untuk menangani jenis-jenisnya tetapi cukup mudah untuk menentukan jenis TS untuk menangani file-file ini.

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

Apa pun yang kami lakukan di sini, dapatkah kami memastikan bahwa tetap mudah menggunakan plugin PostCSS kustom seperti sekarang dengan @zeit/next-css ? Akan sangat disayangkan jika kami kehilangan dukungan untuk itu - CRA tidak mendukungnya dan karena itu tidak mungkin menggunakan alat seperti Tailwind CSS dengan cara apa pun yang wajar.

Saya akan berhati-hati dengan ketiga fitur ini dalam hal ini:

• Gunakan Autoprefixer untuk menambahkan prefiks khusus vendor secara otomatis (tanpa dukungan flexbox lama)
• Polyfill atau kompilasi fitur Tahap 3+ CSS dengan yang setara
• Secara otomatis memperbaiki "flexbugs" yang diketahui pengguna

... karena ini semua dilakukan dengan PostCSS, dan sangat penting bahwa urutan plugin PostCSS berada di bawah kendali pengguna akhir.

Saya akan menyarankan jika Anda akan mengaktifkan ketiga plugin tersebut secara default, bahwa pengguna harus dapat sepenuhnya mengganti konfigurasi default PostCSS dengan menyediakan file postcss.config.js mereka sendiri. Mereka harus menambahkan plugin tersebut secara manual jika mereka mengikuti rute ini, tetapi tingkat kontrol itu diperlukan menurut saya.

TL; DR harap berhati-hati agar tidak merusak kemampuan pengguna untuk memiliki kendali penuh atas PostCSS, saya benar-benar tidak dapat menggunakan CRA karena ini dan saya akan sangat sedih jika saya tidak dapat menggunakan Next lagi.

Seconding @adamwathan - akan sangat bagus untuk mendapatkan detail lebih lanjut di sini tentang bagaimana kustomisasi opsi pos akan terlihat. Akan sangat bagus untuk memiliki opsi untuk memodifikasi konfigurasi postcss melalui plugin berikutnya serta postcss.config.js , sehingga konfigurasi yang dibagikan ke beberapa proyek dapat dengan mudah dimasukkan tanpa file tambahan.

Saya pikir lebih baik mengaktifkan modul css untuk semua impor css (tidak hanya untuk .module sufiks), dan yang kita ingin global kita perlu menentukan sufiks .global .

Modul CSS akan sangat bagus. Saya pikir mempertahankan spesifikasi *.module.(css|scss) baik-baik saja karena selaras dengan create-react-app , memungkinkan pengetikan skrip, dan memungkinkan migrasi lebih mudah bagi pengguna lain yang baru mengenal Next.js

Dengan skrip ketikan, Anda dapat menerapkan pengetikan modul CSS dengan menghasilkan *.d.ts untuk setiap *.(css|scss) file menggunakan typed-css-modules dan typed-scss-modules tetapi jika Anda tidak ingin melakukannya dan masih menginginkan pelengkapan otomatis, Anda dapat menggunakan ekstensi VS Code berikut:
https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

@adamwathan yakinlah kami akan mengizinkan konfigurasi PostCSS! Kami belum yakin bagaimana implementasi _exact_ akan terlihat, tetapi itu akan muncul secara alami dengan permintaan penarikan CSS.

Ini bagus !! Apakah ada jadwal untuk ini? Apa itu terjadi tahun ini?

@andreisoare kami akan menggabungkan separuh global RFC ini: https://github.com/zeit/next.js/pull/8710

Kami akan melanjutkan ke dukungan Modul CSS ASAP!

@adamwathan @Timer akan sangat bagus jika kita dapat terus menggunakan file postcss.config.js konvensional di root proyek, seperti yang bisa kita lakukan sekarang dengan next-sass .

Sangat senang melihat ini menjadi inti.

Apakah rendering jalur kritis AMP didukung oleh RFC ini?

Sebagai catatan, jika bisa, sebaiknya gunakan styled-jsx karena memungkinkan Anda merangkum css, html dan js menjadi 1 ide, sebuah komponen. Jika Anda belum menyadarinya (ini adalah catatan untuk pengguna next.js bukan pemelihara) ini memungkinkan Anda untuk tidak perlu membeli seluruh CSS UI Kit seperti bootstrap, Anda dapat mencoba 1 komponen dan jika tidak Tidak sesuai dengan kebutuhan Anda, Anda membuangnya tanpa beban berurusan dengan beban ketergantungan CSS eksternal itu.

Menurut saya juga sangat penting untuk menyebarkan pengetahuan ini karena CSS sering disalahpahami atau menjadi renungan dan seringkali menjadi kutukan bagi sebuah pekerjaan developer. Tetapi dengan abstraksi yang tepat, sebenarnya bisa sangat mudah untuk bernalar.

dan hanya karena "banyak orang" mengimpor CSS mereka, bukan berarti itu ide yang bagus.

Saya pikir salah satu hal paling kuat tentang react adalah kenyataan bahwa ia merangkum CSS, HTML dan JS untuk Anda. dan jika Anda melakukan side-load (import) CSS, Anda memiliki jenis side-step yang menguntungkan react memberi Anda.

Sebagai catatan: CSS-in-CSS (atau HTML) adalah lapisan transport yang jauh lebih efisien untuk gaya, dan menggabungkan js dan gaya dalam satu file tidak lebih baik daripada menyusunnya dalam satu direktori.
Terlebih lagi - mayoritas CSS-in-JS generasi terakhir mengekstrak CSS ke CSS pada waktu pembuatan demi kinerja, sehingga pengelolaan CSS statis yang tepat adalah suatu keharusan. Namun - cara ekstraksi seperti itu akan didukung oleh Next belum diungkapkan.

Sebagai catatan: smile :: Menggunakan SASS, LESS dengan Framework seperti Bootstrap masih bagus dan berfungsi dengan sangat baik! Enkapsulasi tidak boleh terjadi pada level JS. Menggunakan BEM adalah salah satu alternatif. Mendukung kedua cara itu penting.

@timer Apakah paruh pertama ini (https://github.com/zeit/next.js/pull/8710) berarti pemisahan jalur CSS sekarang berfungsi? Atau apakah itu masih akan datang?

(Terkait, https://github.com/zeit/next-plugins/issues/190)

CSS global tidak dapat dipisahkan jalur, jadi tidak. Hanya Modul CSS (diimpor di tingkat komponen) yang akan dipisahkan jalurnya. 👍

Adakah penjelasan tentang bagaimana hal ini memengaruhi masalah # 9392 dan # 9385? Hanya untuk memahami apa yang terjadi di balik layar. Sehingga, saya bisa mendapatkan solusi tentang cara memperbaiki masalah pada basis kode saya.

Hai. Kami ingin meningkatkan aplikasi React kami ke next.js sebagian besar untuk memanfaatkan perkakas hebat dan rendering sisi server.

Namun bagi kami ini adalah persyaratan yang sulit untuk dapat menggunakan modul CSS. Kami mencoba dengan plugin berikutnya untuk CSS tetapi itu merusak kekacauan dengan masalah seperti # 9392 # 9385 dan banyak lagi.

Apakah ada ETA untuk dukungan Modul CSS (bahkan eksperimental)? Adakah cara untuk membantu mempercepat perkembangannya?

Jadi kita tidak bisa mengimpor css di level komponen?

Bisa, Anda hanya perlu menggunakan solusi sekarang sampai masalah teratasi. Saya rasa Anda dapat menemukan satu yang cocok untuk Anda pada masalah css berikutnya .

Maaf untuk pertanyaan bodoh: sejauh CSS global berjalan, bagaimana ini berbeda / lebih baik daripada hanya menyertakan tautan di kepala?

@otw jika Anda mengimpor CSS global, itu melewati pipa pembangunan dengan sisa kode Anda sehingga diminimalkan dll kemudian menjadi bagian dari pembangunan dan keluaran next.js

Tergantung Anda apakah itu keuntungan. Saya membayangkan kebanyakan orang menantikan modul CSS sehingga CSS yang dibutuhkan untuk komponen tertentu dimuat hanya ketika komponen dimuat.

Untuk konteksnya, kami memiliki tim pengembang yang telah menggunakan NextJS selama dua tahun terakhir untuk membangun hampir 40 aplikasi web untuk startup tahap awal.

Saya ingin mengambil kesempatan di sini untuk menguraikan bagaimana kami mendesain aplikasi kami untuk menunjukkan kebutuhan saat ini, poin nyeri, peringatan tentang beberapa npms yang kami hadapi, dan beberapa kekhawatiran dengan perubahan yang diusulkan.

Implementasi Saat Ini

• Kami memelihara aplikasi "starter kit" yang memiliki banyak fungsi aplikasi inti yang telah dibuat sebelumnya. Ini dikloning sebagai titik awal karena berisi banyak fungsi tambahan dari hanya menggunakan Bootstrap.
• Kami menggunakan Bootstrap dan Reactstrap sebagai dasar dari sistem desain kami. Karena kami menginginkan sistem desain yang kohesif, kami menggunakan SASS global dengan pedoman Bootstrap untuk memperluas sistem desain dan memasukkan tambahan kami sendiri dalam bentuk opsi konfigurasi tambahan, mixin, fungsi, dll. Ini semua diimplementasikan melalui pola impor ke dalam file sass dimuat secara global tanpa modul css melalui contoh next-sass standar NextJS. Tangkapan layar: http://prntscr.com/qc8r0g.
• Untuk sebagian besar proyek kami, kami bisa mendapatkan gaya sebagian besar melalui kelas utilitas yang disediakan oleh penyiapan Bootstrap kami yang diperluas namun ada pengecualian. Untuk pengecualian tersebut, kami menggunakan plugin SASS dengan gaya-jsx . Alasan mengapa kami menggunakan plugin SASS adalah karena kami mengimpor variabel bootstrap, fungsi, dan mixin dari global kami untuk menjaga sistem desain tetap kohesif. Kami membuat impor khusus yang disebut "jsx-helper" yang membawa ini ke dalam gaya-jsx kami. Tangkapan layar: http://prntscr.com/qc8xbr.
• Dalam kasus beberapa komponen tata letak yang perlu menyentuh tag html, badan dan root div, beberapa plugin yang menghasilkan markup mereka sendiri, atau npms yang menggunakan portal dan membutuhkan CSS untuk menyentuh markup tidak dapat diakses dari komponen kami menggunakan opsi global bergaya -jsx. Ini adalah pilihan terakhir tetapi diperlukan untuk komponen tata letak kami seperti yang Anda lihat di sini: http://prntscr.com/qc8yo6

Kelemahan / Masalah Saat Ini

• Kami lebih suka tidak menggunakan kode SASS yang diinjeksi (masalah IDE dan kurangnya dukungan dengan bahasa yang diinjeksi) dengan komponen kami, tetapi contoh penggunaan file sass eksternal dengan style-jsx tidak berfungsi saat mengimpor variabel bootstrap karena bug kompilasi yang diketahui dengan yang diperlukan npm stylis . Proyek ini tampaknya tidak didukung pada saat ini jadi saya akan sangat menyarankan itu tidak ada dalam rantai alat apa pun yang diusulkan oleh NextJS.
• Perubahan pada variabel SCSS global kami yang diimpor ke SASS gaya-jsx kami tidak terdeteksi. Faktanya ada semacam cache modul npm global yang tidak dapat kami hapus yang tampaknya membuat webpack tidak dapat memuat ulang perubahan yang menyebar dari variabel global Bootstrap kami. Melakukan penuh npm ci untuk membangun kembali seluruh folder node_modules , membersihkan cache browser, perintah konsol cache clear force semua tidak berfungsi karena ada beberapa cache npm global yang berfungsi di sini. Oleh karena itu kami sangat ingin hot reload berfungsi dengan baik saat memperbarui file yang diimpor ke modul CSS / SASS yang diterapkan ke komponen. Singkatnya, setiap pemrosesan SASS yang dilakukan oleh komponen harus memperhatikan perubahan impor dan mempertahankan pemuatan ulang yang berfungsi. Ini akan diselesaikan dengan opsi pemuat webpack yang disebutkan di poin sebelumnya.
• Kami harus menemukan solusi untuk membagikan konfigurasi PostCSS kami ke dua tempat terpisah karena SASS global dan gaya-jsx dibuat secara terpisah.

Masalah dengan Perubahan Yang Diajukan

Kami agak prihatin dengan gagasan memblokir opsi global dengan modul komponen CSS / SASS karena kami memiliki beberapa kasus penggunaan yang perlu, berdasarkan komponen, menyentuh tag div html, body, dan root serta kasus HTML yang dihasilkan yang tidak perlu ada di dalam komponen tersebut karena penempatan melalui portal dll. Saya pikir kita bisa mengatasi beberapa hal ini dengan SASS global dan beberapa restrukturisasi sehingga kita tidak bergantung pada komponen mana yang dimuat untuk menerapkan CSS global tertentu.

Kami ingin kontrol penuh atas PostCSS dan lebih suka tidak berurusan dengan dipaksa untuk menerapkan sekumpulan default tertentu.

Maaf, ini balasan yang panjang, tetapi saya pikir kami memiliki beberapa wawasan yang layak untuk dibagikan. Jangan ragu untuk memberi tahu saya jika Anda memiliki pertanyaan dan kami menantikan untuk melihat apa yang tim NextJS munculkan selanjutnya (permainan kata-kata)!

@Tokopedia ,

Kami agak prihatin dengan gagasan memblokir opsi global dengan modul komponen CSS / SASS karena kami memiliki beberapa kasus penggunaan yang perlu, berdasarkan komponen, menyentuh tag div html, body, dan root serta kasus HTML yang dihasilkan yang tidak perlu ada di dalam komponen tersebut

Jika saya memahami Anda dengan benar, Anda masih harus dapat mencapainya menggunakan :global dalam modul CSS.

@Daniell

Jika saya memahami Anda dengan benar, Anda masih harus dapat mencapainya menggunakan :global dalam modul CSS.

Lihat catatan mereka di atas

Penentu Modul CSS diizinkan jika digabungkan dengan nama kelas lokal

Dalam kasus komponen tata letak kami, kami menargetkan <html> , <body> dan div root tanpa nama kelas lokal.

Juga disebutkan dalam video tentang topik ini bahwa mereka sedang mempertimbangkan untuk memblokir opsi :global sepenuhnya yang tidak masuk akal bagi saya mengingat banyaknya npms dan CMS API yang menghasilkan markup yang tidak dapat disentuh dengan modul css terbatas.

Hai @Soundvessel - ini adalah video saya yang saya rekam secara internal untuk tim saya (bagaimana Anda mendapatkan akses ke ini?), Dan tidak secara langsung mewakili pandangan tim nextjs, juga tidak menjamin informasi terkini sejak dibuat selama tahap percobaan awal. Pertimbangkan RFC sebagai kanon tentang topik ini 😁

Saya juga ingin mengucapkan terima kasih karena Anda telah mengusulkan solusi yang memungkinkan penggunaan CSS / SASS daripada JS yang berbelit-belit dalam solusi CSS yang membutuhkan sintaks tambahan seperti properti camelCased, dll. Ada banyak dari kita yang berasal dari desain yang lebih berfokus latar belakang, memiliki pengalaman bertahun-tahun bekerja secara langsung dengan HTML / CSS, dan ini mempermudah kami untuk tidak harus mengubah urutan apa yang kami lihat dalam kode terlalu dalam menjadi apa yang kami debug di layar.

Hanya ingin menambahkan, kecuali saya melewatkan beberapa penyebutan di atas, bahwa deteksi otomatis / -mengaktifkan Sass itu keren, tetapi opsi Sass API juga perlu diekspos di suatu tempat: [email protected] telah membuat pola yang baik termasuk mengizinkan pengguna untuk memilih mesin sass mana yang akan diterapkan; pilihan mereka bisa diambil alih 1: 1 ...

Saya ingin mengusulkan agar ekstensi untuk modul CSS dapat dikonfigurasi.
Mungkin mengekspos sebuah array untuk mendukung lebih dari satu ekstensi selain .module.css ?
Membuat file .module.css dan mengimpornya import "Component.module.css" bila Anda memiliki banyak komponen untuk beberapa pengembang tampaknya agak membengkak bagi kami.

Dalam kasus saya, saya ingin dapat membuat file dengan ekstensi: .m.css , katakan Component.m.css dan impor sebagai import "Component.m.css"

Kecuali tim Next.js mengatakan ada beberapa kesulitan teknis yang mencegah hal ini dilakukan.

Saya tidak berpikir konfigurasi apa pun untuk menamai ekstensi harus dibuka karena itu tampak seperti peningkatan footprint yang tidak perlu, tetapi saya mempertanyakan _need_ untuk ekstensi .module.css jika ini akan menjadi bagian dari penerapan:

Next.js hanya akan memungkinkan Anda untuk mengimpor CSS Global dalam halaman kustom / _app.js.

Awalnya saya berpikir .module.css akan diperlukan untuk membangun untuk mendeteksi apa yang harus diurai sebagai modul CSS dan apa yang tidak boleh, tetapi jika mengimpor non-modul di komponen / halaman apa pun di luar _app.js akan membuat error dan merusak build maka konvensi penamaan tidak diperlukan karena apa pun yang diimpor di luar _app.js seharusnya merupakan modul CSS secara alami.

Apakah ini dipaksakan murni sebagai konvensi dan bukan sebagai kebutuhan?

Pilihan konvensi module.css bertabrakan dengan biara yang sudah didirikan oleh https://github.com/css-modules/css-modules
Contohnya disini:
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
dan di sini:
https://www.gatsbyjs.org/docs/css-modules/

Ya, mungkin membuat ekstensi dapat dikonfigurasi dapat memperumitnya lebih dari yang diperlukan. Tapi setidaknya Anda dapat mendefinisikan .module.css dalam file konstan dan tidak di-hardcode di beberapa tempat untuk mengubahnya melalui monkey patching

@bayu_joo

Perbedaan antara penerapan yang diusulkan ini dan create-react-app adalah bahwa mengimpor "lembar gaya biasa" seperti contoh yang Anda tautkan dengan another-stylesheet.css tidak akan diizinkan sama sekali. Dalam contoh itu .module.css digunakan untuk menentukan stylesheet mana yang harus ditangani dengan cara apa oleh alat pembangunan.

Spesifikasi Modul CSS tidak membuat konvensi penamaan sama sekali.

Saya tahu bahwa Modul CSS tidak menetapkan konvensi apa pun tentang ekstensi file tetapi bagaimana modul diimpor.

Yang ingin saya tuju adalah bahwa .module.css adalah konvensi yang dipilih oleh Tim Next.js dan mereka harus "memfasilitasi" kemungkinan bahwa beberapa pengguna dapat mengubahnya meskipun melalui modul pasca-instal yang melakukan monkey patching

Saya pikir .module.css adalah konvensi penamaan pertama ekstensi yang diberlakukan oleh Next.Js. Harap perbaiki saya jika saya salah.

Pilihan konvensi module.css bertabrakan dengan biara yang telah dibuat oleh css-modules / css-modules
Contohnya disini:
create-react-app.dev/docs/adding-a-css-modules-stylesheet
dan di sini:
gatsbyjs.org/docs/css-modules

Ya, mungkin membuat ekstensi dapat dikonfigurasi dapat memperumitnya lebih dari yang diperlukan. Tapi setidaknya Anda dapat mendefinisikan .module.css dalam file konstan dan tidak di-hardcode di beberapa tempat untuk mengubahnya melalui monkey patching

Anda bertentangan dengan maksud Anda di sini, .module.css digunakan oleh create-react-app dan gatsby untuk fitur yang sama. Itu adalah pola yang mapan.

Namun mengubah konvensi penamaan bukanlah pola yang mapan dan tidak ada alasan untuk mengizinkannya di Next.js.

Saya pikir .module.css adalah konvensi penamaan pertama | ekstensi yang diberlakukan oleh Next.Js. Harap perbaiki saya jika saya salah.

Next.js menetapkan konvensi atas opsi konfigurasi, misalnya:

• pages direktori menjadi rute
• pages/api menjadi rute API
• dukungan untuk .js .tsx .tsx

Hai @timutens

Polanya adalah bagaimana CSS Modules menetapkan bagaimana file CSS harus diimpor ke objek JS, nama CSS yang dimaksud adalah marginal. Dalam hal ini Next.js tidak menggunakan pola khusus itu dengan implementasi baru.
CSS Modules seperti di Gatsby dan CRA sudah diterapkan di Berikutnya sebelumnya: https://github.com/zeit/next-plugins/tree/master/packages/next-css

Saya tidak mempertanyakan konvensi yang digunakan, .module.css , bahkan mengetahui bahwa saya dapat membingungkan pengguna CRA dan Gatsby dengan CSS Modules . Memilih nama yang cocok itu sulit dan tidak semua orang selalu senang.

Meskipun saya yakin bahwa konvensi .m.css lebih baik karena lebih pendek (lebih cocok untuk ekstensi) dan tidak terlalu berlebihan (pernyataan impor untuk mengimpor modul), saya ingin Anda mempertimbangkan hal ini. Mendefinisikan konvensi secara umum dan .module.css secara spesifik dalam file konstan akan cukup membantu untuk menambalnya.

Bagaimanapun, banyak selamat atas modul CSS. Anda telah melakukan pekerjaan yang luar biasa, tampaknya itu adalah tugas yang "hampir" mustahil.

Jika saya dapat menambahkan dua sen saya pada konvensi penamaan: kami memiliki pustaka komponen yang menggunakan ekstensi .pcss karena kami memerlukan PostCSS untuk kompilasi dan kami memutuskan untuk menggunakan konvensi penamaan ini, kami juga perlu mengimpor CSS ini sebagai modul . Bagaimana Anda menangani kasus ini? Kami sedang meretas konfigurasi webpack dan menambal regex uji pemuat, tetapi rasanya kotor seperti yang Anda bayangkan.

Saya membayangkan bahwa .module.css mendukung postCSS seperti yang saat ini dilakukan oleh global .css.

Saya tahu apa yang terjadi, saya pikir saya perlu liburan.

Saat meninjau PR: https://github.com/zeit/next.js/pull/9686 Saya pikir saya "melihat" bahwa modul CSS diimpor dengan cakupan seperti modul global diimpor.

Saya dengan tulus berpikir saya membaca kode ini:

index.module.css

.redText {
  color: net;
}

import './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = "redText">
      This text should be red.
    </div>
  )
}

Jelas tidak ada hubungannya dengan kenyataan. Pada kenyataannya kode sebenarnya adalah ini.

import {redText} from './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = {redText}>
      This text should be red.
    </div>
  )
}

Hanya Modul CSS seperti di CRA atau Gatsby. Karenanya kebingungan, kebingungan saya.

Saya minta maaf kepada semua orang atas kesalahan tersebut.

:-(

Saat menggunakan Modul CSS, masalah utamanya adalah:

Gunakan Modul CSS dalam proyek saya, dan beberapa komponen pihak ketiga juga menggunakan Modul CSS.
Tapi ... beberapa komponen pihak ketiga menggunakan CSS global.

Saya pikir solusi ekstensi .module.css mudah dipahami dan diterapkan.
Dan kerangka kerja lainnya (CRA 、 Gatsby) telah mencapai konsensus.

Hingga saat ini, saya belum mengalami masalah apa pun tentang solusi ekstensi.
Jadi, saya berharap mempromosikan pengembangan ekstensi .module.css .

Jika ada solusi lain tentang masalah Modul CSS, itu lebih baik.

@bayu_joo
Meskipun .m.css lebih pendek, tapi menurut saya itu tidak lebih baik.
Apakah min.css atau module.css ?

@ xyy94813 atau kebalikannya, semua impor css adalah modul, file dengan .global.scss akan menjadi file global

@kuliah_fauzi
Tapi, itu tidak ramah untuk komponen yang diterbitkan.

Saya pikir konvensi tersebut adalah default yang baik, tetapi beberapa opsi konfigurasi khusus untuk modul CSS pada akhirnya harus tersedia, misalnya yang diteruskan ke css-loader , karena beberapa pengguna ingin mengontrol bagaimana "cakupan" nama kelas adalah keluaran. Sebuah opsi dapat ditambahkan untuk menyediakan regex yang menentukan file CSS mana yang dimuat sebagai "modul"

karena beberapa pengguna ingin mengontrol bagaimana nama kelas "cakupan" dikeluarkan

Contoh mengapa Anda menginginkannya? Saya tidak bisa memikirkan apapun.

Contoh jika mengapa Anda menginginkannya? Saya tidak bisa memikirkan apapun.

@timneutkens Saya mungkin lebih suka menampilkan pola penamaan yang pada dasarnya sesuai dengan pola penamaan kelas global saya dengan hanya string terbatas di bagian akhir.
Di luar ini, saya sedang memikirkan skenario pembersihan atau pemisahan pasca-pembuatan atau pemuatan di mana saya mungkin ingin memasukkan namespace tertentu ke daftar putih, tetapi saya belum mengerjakannya.

Saya pikir penting untuk diingat bahwa kerangka kerja beropini dimaksudkan untuk membuat keputusan bagi Anda untuk menghilangkan penyiapan awal dan menerapkan keseragaman.

Beberapa dari keputusan tersebut harus datang dengan default yang dapat diubah melalui opsi konfigurasi atau ekstensi, tetapi dengan semua yang Anda buat dapat disesuaikan, Anda meningkatkan basis kode yang membuat lebih banyak kode untuk diuji, dipelihara, dan didokumentasikan yang pada gilirannya perlu dipertahankan juga.

Sesuatu seperti pola hash keluaran tercakup sangat terperinci jika Anda sampai pada titik di mana Anda _membutuhkan_ untuk menimpa default, kemungkinan Anda berada pada titik di mana Anda seharusnya hanya menulis pemuat khusus yang Anda butuhkan sendiri.

Saat bekerja dengan pengembang React baru, saya selalu merasa lebih mudah untuk menyampaikan konsep gaya pelingkupan ke sebuah komponen melalui className. Cukup berikan elemen luar di komponen Anda sebuah className unik, biasanya sama dengan nama komponen Anda, dan tulis gaya Anda seperti ini jika menggunakan SCSS:

.Navbar {
  .logo { ... }
  .nav-item { ... }
}

Saya pasti melihat keuntungan dari css-modules , tapi saya sedikit khawatir bahwa dengan tidak lagi mendukung metode di atas, Next.js akan menjadi kurang bersahabat dengan pengembang baru. Mungkin itu pertukaran yang bagus untuk dilakukan jika Anda melihat banyak orang mengalami masalah pemesanan css, tetapi saya bertanya-tanya apakah menerapkan css-modules setidaknya dapat dinonaktifkan melalui next.config.js . Atau mungkin kita bahkan bisa memiliki pemeriksaan waktu pembuatan yang memastikan semua gaya dicakup dengan benar dengan className yang unik, meskipun tidak yakin bagaimana bisa dilakukan itu secara teknis.

Saya agak khawatir bahwa dengan tidak lagi mendukung metode di atas, Next.js akan menjadi kurang bersahabat dengan pengembang baru

Kecuali jika saya salah memahami sesuatu, menurut saya Modul CSS tidak eksklusif, melainkan pemuat akan menerapkan parser Modul CSS hanya jika file yang Anda impor memiliki pola penamaan *.module.css , atau *.module.scss untuk masalah itu

@ lunon-bl

Ini semi-eksklusif sebagai lawan dari bagaimana CRA atau Gatsby mengaktifkan parser hanya ketika Anda menggunakan pola penamaan Next akan melarang impor non-modul langsung ke komponen JS.

Dari RFC:

/* components/button.js */
import { btnLarge } from './button.module.css'

// import '../styles.css'; // <-- this would be an error

Untuk menggunakan kelas non-modul, Anda perlu mengimpor lembar gaya ke dalam lembar gaya global Anda yang hanya diimpor ke _app.js (jika Anda ingin kelas itu dipisahkan dan ditempatkan di file komponen Anda). Jika tidak, mereka perlu ditempatkan langsung ke stylesheet global tersebut.

Saya adalah pengguna baru next.js. Setelah saya membaca terbitan ini dan merasa sedikit bingung. Saya pikir jika next.js mendukung build-in-css-support , jadi kita tidak memerlukan plugin @ next-css, tetapi tidak berfungsi dan memunculkan kesalahan tentang "ModuleParseError".
Jika saya menambahkan plugin @ next-css untuk menambahkan dukungan impor CSS, itu berfungsi, jadi bagaimana build-in-css-support tanpa @ next-css, dapatkah Anda memberikan contoh?
Terima kasih semuanya.

Saya adalah pengguna baru next.js. Setelah membaca terbitan ini dan saya agak bingung. Saya rasa next.js mendukung dukungan build-css , jadi kita tidak memerlukan plugin @ next-css, tetapi tidak bekerja dan tidak mendapatkan kesalahan tentang "ModuleParseError".
Jika saya menambahkannya ke plugin @ next-css untuk menambahkan dukungan impor CSS, itu berfungsi, jadi bagaimana Anda membuat css-build tanpa @ next-css, dapatkah Anda memberikan contoh?
terima kasih @ SEMUA .

tambahkan konfigurasi ke next.config.js Anda seperti ini:

module.exports = {
  experimental: {
    css: true
  }
}

@erkanunluturk terima kasih, tidak apa-apa, tetapi memiliki peringatan fitur eksperimental, apakah itu penting?
Dan bagaimana itu kompatibel dengan antd? Saya tahu dengan-desain-semut tidak apa- apa.

@Timer Dapatkah Anda memberikan contoh impor ant-desain menggunakan [RFC] dukungan css? Terima kasih.

Saya masih mengalami masalah dengan Router.push ("/") saat saya berada di link lain. Ada yang punya solusi untuk itu? Tolong bantu saya, terima kasih banyak

: peringatan: Harap berhenti menggunakan utas ini sebagai pelacak masalah dan harapan. Ini adalah RFC dan mereka masih menerapkannya.

Komentar bermakna terakhir dari tim ini adalah https://github.com/zeit/next.js/issues/8626#issuecomment -531415968 Anda dapat mengevaluasi implementasi saat ini dengan mengaktifkannya melalui https://github.com/zeit/next .js / issues / 8626 # issue -568736218

Saya kehilangan kemungkinan untuk melacak pekerjaan. Bagaimana kami dapat membantu? @Timer apakah mungkin untuk menghubungkan RFC ini dengan tonggak sejarah, peta jalan? Apa yang dilakukan dari poin-poin di RFC?

Tidak tahu, bagaimana agar tetap di jalur: bingung:

@StarpTech RFC ini sepenuhnya diimplementasikan; Modul CSS dan CSS Global bekerja sesuai dengan deskripsi RFC.

Anda dapat menguji keduanya dengan satu tanda percobaan!

Saya akan mengunci utas ini untuk mencegah penyebaran pemberitahuan lebih lanjut. Jika ada yang mengidentifikasi masalah, buka masalah baru dan beri tahu kami! Kami akan memposting di sini ketika dukungan secara resmi ditandai stabil (dan aktif secara default).

Mendarat di 9.2: https://nextjs.org/blog/next-9-2