Next.js: Sertakan css dalam proyek berikutnya?

Dibuat pada 27 Nov 2016  ·  31Komentar  ·  Sumber: vercel/next.js

Saya tahu bahwa Next menggunakan Glamour dan css-in-js. Tapi, apakah ada cara untuk menggunakan css/less/scss nyata dalam proyek Berikutnya ... entah bagaimana? Setidaknya untuk bootstrap sebuah proyek?

Alasan saya adalah ini - untuk situs sederhana, seperti yang Next ditargetkan, sebagian besar tema html yang dibuat sebelumnya yang dapat dibeli secara online dibuat menggunakan html dan css murni. Jadi, yang perlu Anda lakukan adalah memotong HTML menjadi komponen reaksi, meletakkannya di folder halaman yang sesuai, dan selesai.

Saya sangat ingin menggunakan Next untuk proyek saya, tetapi jika saya tidak dapat memanfaatkan css yang sudah jadi, itu akan menjadi pemecah kesepakatan bagi saya. Apakah ada solusi atau solusi untuk kasus penggunaan ini?

picture manolkalinov

Komentar yang paling membantu

  • Buat folder /static pada level yang sama dengan folder /pages .
  • Di folder itu taruh file .css Anda
  • Dalam komponen halaman Anda, impor Head dan tambahkan <link /> ke CSS Anda.
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Dan hanya itu, dengan cara ini Next.js akan merender tag tautan di kepala halaman dan browser akan mengunduh CSS dan menerapkannya.

picture sergiodxa pada 27 Nov 2016
👍79 👎17 🎉7 ❤2 🚀1

Semua 31 komentar

  • Buat folder /static pada level yang sama dengan folder /pages .
  • Di folder itu taruh file .css Anda
  • Dalam komponen halaman Anda, impor Head dan tambahkan <link /> ke CSS Anda.
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Dan hanya itu, dengan cara ini Next.js akan merender tag tautan di kepala halaman dan browser akan mengunduh CSS dan menerapkannya.

sergiodxa picture sergiodxa pada 27 Nov 2016
👍79 👎17 🎉7 ❤2 🚀1

Wah, terima kasih atas balasan cepatnya :). Berhasil! Hanya ada satu hambatan - saat pertama kali memuat halaman, ada kilatan html yang tidak ditata tepat sebelum semuanya dirender dengan benar. Saya tidak yakin apakah itu dari file css atau js yang dimuat setelah reaksi. Apakah akan ada solusi untuk ini?

Bagaimanapun, saya benar-benar terkesan dengan pekerjaan yang kalian lakukan dan sekali lagi terima kasih atas balasan cepatnya!

manolkalinov picture manolkalinov pada 28 Nov 2016

Nevermind, saya mengimpor komponen header dengan link css dan js di halaman indeks juga, dan flash hilang. Selanjutnya, mengubah tag jangkar ke komponen Tautan, menghilangkan lompatan yang tersisa. Kelemahannya adalah komponen Tautan tampaknya menghapus semua tag html dari turunannya (seperti tag rentang dengan kelas ikon), sehingga hanya teks yang tersisa.

Saya tahu kasus penggunaan ini kebalikan dari benar dan dioptimalkan, tetapi ini sangat berguna untuk kasus-kasus ketika kita harus menggunakan cepat dan kotor ... keburukan :)

Jadi alur kerja untuk mengintegrasikan tema html yang sudah jadi adalah ini:

  1. buat folder statis dan salin/pindahkan semua file js/css/img dari template
  2. buat file page.js dengan komponen
  3. Tambahkan html ke komponen dan modifikasi agar sesuai dengan reaksi
    3.1. tambahkan tag Head dan di dalamnya sertakan semua file css/js dari html asli
    3.2. perbarui jalur ke file-file itu agar sesuai dengan folder statis baru
    3.3. Copy/paste html di bawah tag head
    3.4 Menutup atau menutup sendiri semua tag html yang tidak ditutup (termasuk tag tautan, input, dan img)
    3.5. Temukan/Ganti semua instance class=" dengan className="
    3.6. Hapus semua komentar html
manolkalinov picture manolkalinov pada 28 Nov 2016
👍9 🎉3 😄3

@manolkalinov dapatkah Anda menambahkan kode Anda untuk referensi mudah? Saya tahu Anda menulis alur kerja tetapi kode sampel membuatnya lebih mudah untuk diikuti dan di-debug jika terjadi masalah.

ralphievolt picture ralphievolt pada 29 Nov 2016
👍1

Menambahkan CSS di tag kepala pasti berhasil. Namun itu agak hacky dan bagaimana jika kita ingin menggunakan sesuatu seperti postcss atau sass ? Bagaimana cara mengubah gaya css yang ada menjadi objek JSON glamor? Juga sangat sulit bagi desainer untuk menata halaman dengan menggunakan glamor . Pasti ada cara yang lebih baik untuk melakukannya.
Omong-omong, dibandingkan dengan Modul CSS, apa manfaat menggunakan glamor ?

dzcpy picture dzcpy pada 30 Nov 2016
👍6

@andyhu silahkan baca https://github.com/zeit/next.js#faq tentang manfaat menggunakan glamor .
Tentang postcss atau sass , menyesuaikan konfigurasi webpack akan memungkinkan Anda untuk menggunakannya (https://github.com/zeit/next.js/pull/222), atau saya pikir Anda bisa kompilasi file-file ini ke css sebelum menjalankan next .

nkzawa picture nkzawa pada 1 Des 2016

Saya pikir itu terpecahkan. Jangan ragu untuk membuka kembali jika Anda masih memiliki masalah. Terima kasih atas jawaban Anda @sergiodxa !

nkzawa picture nkzawa pada 1 Des 2016

@nkzawa Saya menggunakan penyesuaian konfigurasi webpack, jadi saya dapat menggunakan lebih sedikit dalam proyek saya. ini kode saya
next.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

maka saya memerlukan lebih sedikit file import './index.less' , tetapi terjadi kesalahan

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

Saya yakin saya telah menginstal less , less-loader , css-loader , style-loader , dapatkah Anda memberikan saran, terima kasih sebelumnya.

kimown picture kimown pada 5 Jan 2017

Kamu harus mencobanya

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })
bkniffler picture bkniffler pada 9 Jan 2017

@kimown Apakah Anda berhasil mengimpor file yang lebih sedikit? Jika demikian, maukah Anda membagikan bagaimana Anda melakukannya?

crodriguezvega picture crodriguezvega pada 25 Jun 2017

@sergiodxa Bagaimana saya bisa mengimpor css dari node_modules?

saadbinsaeed picture saadbinsaeed pada 19 Jul 2017
👍17

Saya sendiri memiliki pertanyaan ini tentang mengimpor CSS dari paket npm.

Misalnya rc-slider

import 'rc-slider/assets/index.css'

notrab picture notrab pada 19 Jul 2017
👍12

Apakah ada jawaban untuk ini? @notrab

paulwehner picture paulwehner pada 26 Agu 2017

@notrab
Coba ini

Di komponen root atau _document Anda

import stylesheet from 'rc-slider/assets/index.css';

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>
saadbinsaeed picture saadbinsaeed pada 28 Agu 2017
😕3 👍1

@saadbinsaeed saya mencoba ini. Ini berfungsi untuk komponen dan halaman sendiri. Tapi saya ingin membundelnya dengan webpack, alih-alih membuatnya sebaris.

schoenwaldnils picture schoenwaldnils pada 15 Sep 2017
👍1

@schoenwaldnils saya mencoba melakukannya tetapi tidak bisa. Sesuai pemahaman saya, kami menggunakan aplikasi sisi server sehingga kami tidak dapat menggabungkan file css yang terpisah dan mengirimkannya ke klien karena server tidak tahu apa itu css. kita harus menanamkan css di html kita. Untuk mengaksesnya di seluruh aplikasi Anda, sematkan di komponen root atau tautkan di header seperti yang ditunjukkan di atas oleh @sergiodxa.

saadbinsaeed picture saadbinsaeed pada 15 Sep 2017

Saya telah mencoba pendekatan @sergiodxa , tetapi tidak berhasil untuk saya. Apakah ini masih berlaku dengan Next versi terbaru?

nickwild-999 picture nickwild-999 pada 14 Okt 2017

@sergiodxa terima kasih. Hanya saya sedang mencari.

fredybustos picture fredybustos pada 30 Nov 2017

@sergiodxa Anda harus mengubah jawaban Anda. Ini bukan statika ! Itu harus statis

ayberkanilatsiz picture ayberkanilatsiz pada 6 Des 2017
👍2

Menggunakan impor CSS sederhana sekarang menggunakan https://github.com/zeit/next-plugins

Maaf untuk masalah benjolan 1 tahun. Rupanya, orang-orang berakhir di sini melalui google.

timneutkens picture timneutkens pada 22 Agu 2018
👍1

Menggunakan impor CSS sederhana sekarang menggunakan https://github.com/zeit/next-plugins

Maaf untuk masalah benjolan 1 tahun. Rupanya, orang-orang berakhir di sini melalui google.

Tidak juga. Sepertinya saya tidak dapat menemukan cara mudah untuk mengimpor css langsung dari node_module. Apakah ini dengan desain?

cyberdude picture cyberdude pada 14 Sep 2018
👍6

Menggunakan impor CSS sederhana sekarang menggunakan https://github.com/zeit/next-plugins
Maaf untuk masalah benjolan 1 tahun. Rupanya, orang-orang berakhir di sini melalui google.

Tidak juga. Sepertinya saya tidak dapat menemukan cara mudah untuk mengimpor css langsung dari node_module. Apakah ini dengan desain?

Tidak juga setelah versi 7 berikutnya, apakah Anda sudah melihatnya? ini bahkan lebih mudah dari sebelumnya ;)

mtrabelsi picture mtrabelsi pada 30 Sep 2018

@mtrabelsi dapatkah Anda memberikan beberapa contoh bagaimana Anda mengimpor css langsung dari modul node di Next.js 7 karena saya terjebak dengannya. Saya perlu mengimpor beberapa gaya dari modul simpul tetapi saya tidak dapat menemukan solusi yang berfungsi.

bogdan100 picture bogdan100 pada 13 Nov 2018

Kami memperbaiki masalah ini dengan menggunakan copy-webpack-plugin.
Dalam konfigurasi webpack (next.config.js):

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater picture yarakhater pada 13 Des 2018

anda dapat memeriksa perbaikan untuk perbaikan css sisi klien https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 picture AmanAgarwal041 pada 17 Jan 2019

Saya pikir ada cara yang lebih sederhana untuk melakukannya:

3 langkah sederhana:

  1. Instal plugin css berikutnya:
npm install --save @zeit/next-css
  1. Buat di direktori root Anda next.config.js dengan konten berikut:
// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. Sekarang Anda seharusnya dapat mengimpor stylesheet dari node_modules seperti ini:
import 'bootstrap-css-only/css/bootstrap.min.css';

_Catatan: Menggunakan Berikutnya v 8+_

Latar belakang:
Saya menghabiskan beberapa jam mencoba mengimpor CSS yang diinstal sebagai node_module dan berbagai solusi sebagian besar merupakan solusi peretasan, tetapi seperti yang ditunjukkan di atas, ada solusi sederhana.
Itu disediakan oleh salah satu anggota tim inti: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq picture Vrq pada 20 Mar 2019
👍18 🎉12 ❤7

Jika ada yang menggunakan jawaban @sergiodxa , jika Anda menamai folder itu static tag tautan harus menjadi referensi static .

garrettmaring picture garrettmaring pada 14 Nov 2019

😂 sepertinya orang membaca masalah GitHub lebih dari dokumentasi resmi (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi picture mtrabelsi pada 14 Nov 2019

@mtrabelsi , Masalah ini lebih berharga daripada dokumentasi imo, Jika Anda ingin menggunakan css secara langsung, misalnya import 'bootstrap-css-only/css/bootstrap.min.css'; , tidak ada yang disebutkan dalam dokumentasi sampai saya menemukan jawaban @Vrq

Tokenyet picture Tokenyet pada 24 Nov 2019
👍1

@timneutkens

Saya mencoba mengimpor file css normal saya sendiri. Pada akhirnya adalah cara yang benar untuk mengimpornya menggunakan dokumentasi di https://github.com/zeit/next-plugins/tree/master/packages/next-css
atau apakah cara yang benar menggunakan jawaban @sergiodxa dari tahun 2017, yang diimpor melalui tautan di tag <Head> ?

Inilah yang saya temukan di pihak saya:

  • Kedua metode berfungsi saat Anda memuat halaman secara langsung (langsung ke url)
  • Hanya cara Sergios yang berfungsi ketika Anda menavigasi ke halaman untuk pertama kalinya dengan Router.push (menggunakan cara dari dokumentasi css berikutnya tidak memuat css)
  • Satu-satunya masalah dengan cara Sergio adalah saya masih melihat kilatan html yang tidak ditata ketika membuka halaman untuk pertama kalinya dengan Router.push

Adakah yang tahu bagaimana cara menghindari flash ini, tanpa perlu memasukkan css saya ke dalam file _document?

Menghargai itu.

Ollynov picture Ollynov pada 3 Des 2019

Lihat #8626 untuk dukungan CSS yang akan datang ke Next.js!

Timer picture Timer pada 3 Des 2019
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

ghost picture ghost  ·  3Komentar
rauchg picture rauchg  ·  3Komentar
YarivGilad picture YarivGilad  ·  3Komentar
jesselee34 picture jesselee34  ·  3Komentar
timneutkens picture timneutkens  ·  3Komentar