Next.js: अगली परियोजना में सीएसएस शामिल करें?

को निर्मित 27 नव॰ 2016 · 31टिप्पणियाँ · स्रोत: vercel/next.js

मुझे पता है कि अगला ग्लैमर और सीएसएस-इन-जेएस का उपयोग करता है। लेकिन, क्या किसी अगली परियोजना में वास्तविक सीएसएस/कम/एससीएसएस का उपयोग करने का कोई तरीका है ... किसी तरह? कम से कम किसी प्रोजेक्ट को बूटस्ट्रैप करने के लिए?

मेरा तर्क यह है - सरल साइटों के लिए, जैसे कि अगला लक्षित है, अधिकांश पूर्व-निर्मित html थीम जिन्हें ऑनलाइन खरीदा जा सकता है, शुद्ध html और css का उपयोग करके बनाई गई हैं। तो, आपको केवल HTML को प्रतिक्रिया घटकों में काटना है, उन्हें उपयुक्त पृष्ठ फ़ोल्डरों में रखना है, और आपका काम हो गया।

मैं वास्तव में अपने प्रोजेक्ट के लिए नेक्स्ट का उपयोग करना पसंद करूंगा, लेकिन अगर मैं किसी तरह से तैयार सीएसएस का लाभ उठाने में सक्षम नहीं हूं, तो यह मेरे लिए एक डील ब्रेकर होगा। क्या इस उपयोग के मामले में कोई समाधान या समाधान है?

स्रोत

manolkalinov

सबसे उपयोगी टिप्पणी

/pages फ़ोल्डर के समान स्तर पर /pages /static फ़ोल्डर बनाएं।
उस फोल्डर में अपनी .css फाइलें डालें
आपके पृष्ठ में घटक Head आयात करते हैं और अपने CSS में <link /> जोड़ते हैं।

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>
)

और बस इतना ही, इस तरह Next.js को पृष्ठ के शीर्ष में लिंक टैग प्रस्तुत करना चाहिए और ब्राउज़र CSS को डाउनलोड करके उसे लागू कर देगा।

sergiodxa 27 नव॰ 2016

👍79 👎17 🎉7 ❤2 🚀1

सभी 31 टिप्पणियाँ

/pages फ़ोल्डर के समान स्तर पर /pages /static फ़ोल्डर बनाएं।
उस फोल्डर में अपनी .css फाइलें डालें
आपके पृष्ठ में घटक Head आयात करते हैं और अपने CSS में <link /> जोड़ते हैं।

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>
)

sergiodxa 27 नव॰ 2016

👍79 👎17 🎉7 ❤2 🚀1

वाह, त्वरित उत्तर के लिए धन्यवाद :)। यह काम करता हैं! बस एक रोड़ा है - जब पहली बार पृष्ठ लोड किया जाता है, तो सब कुछ ठीक से प्रस्तुत करने से ठीक पहले अनस्टाइल्ड html का एक फ्लैश होता है। मुझे यकीन नहीं है कि यह सीएसएस या जेएस फाइलों से पोस्ट-रिएक्शन लोड किया गया है। क्या इसका कोई उपाय होगा?

वैसे भी, आप लोग जो काम कर रहे हैं उससे मैं बिल्कुल प्रभावित हूं और त्वरित उत्तर के लिए फिर से धन्यवाद!

manolkalinov 28 नव॰ 2016

कोई बात नहीं, मैंने हेडर घटक को इंडेक्स पेज में सीएसएस और जेएस लिंक के साथ आयात किया, और फ्लैश चला गया। इसके अलावा, एंकर टैग को लिंक घटकों में बदलने से कोई भी बचा हुआ कूद हटा दिया जाता है। नकारात्मक पक्ष यह है कि लिंक घटक अपने बच्चों से किसी भी एचटीएमएल टैग को छीन लेता है (जैसे आइकन कक्षाओं के साथ स्पैन टैग), ताकि केवल टेक्स्ट छोड़ा जा सके।

मुझे पता है कि यह उपयोग मामला सही और अनुकूलित के विपरीत है, लेकिन यह उन मामलों के लिए वास्तव में उपयोगी है जब हमें त्वरित और गंदे का सहारा लेना पड़ता है ... कुरूपता :)

तो पूर्व-निर्मित html थीम को एकीकृत करने के लिए कार्यप्रवाह यह है:

एक स्थिर फ़ोल्डर बनाएँ और टेम्पलेट से सभी js/css/img फ़ाइलों को कॉपी/स्थानांतरित करें
एक घटक के साथ एक पेज.जेएस फ़ाइल बनाएँ
घटक में html जोड़ें और प्रतिक्रिया का अनुपालन करने के लिए इसे संशोधित करें
3.1. हेड टैग जोड़ें और इसमें मूल html से सभी css/js फ़ाइलें शामिल करें
3.2. नए स्थिर फ़ोल्डर से मेल खाने के लिए उन फ़ाइलों के पथ को अद्यतन करें
3.3. html को हेड टैग के नीचे कॉपी/पेस्ट करें
3.4 किसी भी बंद html टैग को बंद या स्वयं बंद करें (लिंक, इनपुट और img टैग सहित)
3.5. वर्ग के सभी उदाहरणों को खोजें/बदलें = "वर्गनाम के साथ = "
3.6. सभी html टिप्पणियाँ हटाएं

manolkalinov 28 नव॰ 2016

👍9 🎉3 😄3

@manolkalinov क्या आप कृपया अपना कोड आसान संदर्भ के लिए जोड़ सकते हैं? मुझे पता है कि आपने वर्कफ़्लो लिखा है, लेकिन एक नमूना कोड समस्या होने पर अनुसरण करना और डीबग करना आसान बनाता है।

ralphievolt 29 नव॰ 2016

👍1

सीएसएस को हेड टैग में जोड़ना निश्चित रूप से काम करता है। हालाँकि यह एक प्रकार का हैकी है और क्या होगा यदि हम postcss या sass जैसी किसी चीज़ का उपयोग करना चाहते हैं? मौजूदा सीएसएस शैलियों को ग्लैमर JSON ऑब्जेक्ट में कैसे परिवर्तित करें? डिजाइनरों के लिए glamor का उपयोग करके पृष्ठ को स्टाइल करना भी बहुत मुश्किल है। इसे करने का एक बेहतर तरीका होना चाहिए।
वैसे, CSS मॉड्यूल की तुलना में, glamor का उपयोग करने का क्या लाभ है?

dzcpy 30 नव॰ 2016

👍6

@andyhu कृपया glamor का उपयोग करने के लाभ के बारे में https://github.com/zeit/next.js#faq पढ़ें।
लगभग postcss या sass के बारे में, वेबपैक कॉन्फ़िगरेशन को अनुकूलित करने से आप उनका उपयोग कर सकेंगे (https://github.com/zeit/next.js/pull/222), या मुझे लगता है कि आप बस कर सकते हैं next निष्पादित करने से पहले इन फ़ाइलों को सीएसएस में संकलित करें।

nkzawa 1 दिस॰ 2016

मुझे लगता है कि यह हल हो गया है। अगर आपको अभी भी समस्या है तो बेझिझक फिर से खोलें। आपके उत्तर @sergiodxa के लिए धन्यवाद!

nkzawa 1 दिस॰ 2016

@nkzawa मैं वेबपैक कॉन्फ़िगरेशन को कस्टमाइज़ करने का उपयोग करता हूं, इसलिए मैं अपने प्रोजेक्ट में कम उपयोग कर सकता हूं। मेरा कोड यहां है
अगला.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
}

तो मुझे कम फ़ाइल की आवश्यकता है import './index.less' , लेकिन त्रुटि होती है

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

मुझे यकीन है कि मैंने less , less-loader , css-loader , style-loader स्थापित किया है, क्या आप कुछ सुझाव दे सकते हैं, अग्रिम धन्यवाद।

kimown 5 जन॰ 2017

तुम्हें कोशिश करनी चाहिए

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

bkniffler 9 जन॰ 2017

@kimown क्या आप कम फ़ाइल आयात करने में सफल रहे? यदि हां, तो क्या आप यह साझा करना चाहेंगे कि आपने यह कैसे किया?

crodriguezvega 25 जून 2017

@sergiodxa मैं node_modules से सीएसएस कैसे आयात कर सकता हूं?

saadbinsaeed 19 जुल॰ 2017

👍17

एनपीएम पैकेज से सीएसएस आयात करने के संबंध में मेरा यह प्रश्न स्वयं था।

जैसे आरसी-स्लाइडर

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

notrab 19 जुल॰ 2017

👍12

क्या इसका कोई जवाब था? @notrab

paulwehner 26 अग॰ 2017

@notrab
इसे इस्तेमाल करे

आपके रूट या _दस्तावेज़ घटक में

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

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>

saadbinsaeed 28 अग॰ 2017

😕3 👍1

@saadbinsaeed मैंने यह कोशिश की। यह स्वयं के घटकों और पृष्ठों के लिए काम करता है। लेकिन मैं इसे इनलाइन रखने के बजाय इसे वेबपैक के साथ बंडल करना चाहता हूं।

schoenwaldnils 15 सित॰ 2017

👍1

@schoenwaldnils मैंने ऐसा करने की कोशिश की लेकिन नहीं कर सका। मेरी समझ के अनुसार हम सर्वर साइड एप्लिकेशन का उपयोग कर रहे हैं, इसलिए हम अलग-अलग सीएसएस फाइलों को बंडल नहीं कर सकते हैं और उन्हें क्लाइंट को भेज सकते हैं क्योंकि सर्वर नहीं जानता कि सीएसएस क्या है। हमें अपने एचटीएमएल में सीएसएस एम्बेड करना होगा। इसे अपने पूरे एप्लिकेशन में एक्सेस करने के लिए इसे रूट कंपोनेंट में एम्बेड करें या इसे हेडर में लिंक करें जैसा कि ऊपर @sergiodxa द्वारा दिखाया गया है।

saadbinsaeed 15 सित॰ 2017

मैंने @sergiodxa दृष्टिकोण की कोशिश की है, लेकिन यह मेरे लिए काम नहीं करता है। क्या यह अभी भी Next के नवीनतम संस्करणों पर लागू होता है?

nickwild-999 14 अक्तू॰ 2017

@sergiodxa धन्यवाद। बस मैं ढूंढ रहा था।

fredybustos 30 नव॰ 2017

@sergiodxa आपको अपने उत्तर बदलने चाहिए। यह स्टैटिक्स नहीं है! यह स्थिर होना चाहिए

ayberkanilatsiz 6 दिस॰ 2017

👍2

https://github.com/zeit/next-plugins . का उपयोग करके अब CSS आयात का उपयोग करना सरल है

1 साल पुरानी समस्या के लिए खेद है। जाहिर है, लोग यहां Google के माध्यम से समाप्त होते हैं।

timneutkens 22 अग॰ 2018

👍1

https://github.com/zeit/next-plugins . का उपयोग करके अब CSS आयात का उपयोग करना सरल है
1 साल पुरानी समस्या के लिए खेद है। जाहिर है, लोग यहां Google के माध्यम से समाप्त होते हैं।

ज़रूरी नहीं। मुझे नोड_मॉड्यूल से सीधे सीएसएस आयात करने का एक आसान तरीका नहीं मिल रहा है। क्या यह डिजाइन द्वारा है?

cyberdude 14 सित॰ 2018

👍6

https://github.com/zeit/next-plugins . का उपयोग करके अब CSS आयात का उपयोग करना सरल है
1 साल पुरानी समस्या के लिए खेद है। जाहिर है, लोग यहां Google के माध्यम से समाप्त होते हैं।
ज़रूरी नहीं। मुझे नोड_मॉड्यूल से सीधे सीएसएस आयात करने का एक आसान तरीका नहीं मिल रहा है। क्या यह डिजाइन द्वारा है?

वास्तव में अगले संस्करण 7 के बाद नहीं, क्या आप पहले से ही देख चुके हैं? यह पहले से भी ज्यादा आसान है;)

mtrabelsi 30 सित॰ 2018

@mtrabelsi क्या आप कृपया कुछ उदाहरण दे सकते हैं कि आप नेक्स्ट.जेएस 7 में सीधे नोड मॉड्यूल से सीएसएस कैसे आयात करते हैं क्योंकि मैं इसके साथ फंस गया हूं। मुझे नोड मॉड्यूल से कुछ शैलियों को आयात करने की आवश्यकता है, लेकिन मुझे काम का समाधान नहीं मिल रहा है।

bogdan100 13 नव॰ 2018

हमने कॉपी-वेबपैक-प्लगइन का उपयोग करके इस समस्या को ठीक किया है।
वेबपैक कॉन्फ़िगरेशन में (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 13 दिस॰ 2018

आप क्लाइंट साइड सीएसएस फिक्स https://github.com/AmanAgarwal041/next-css-fix के लिए एक फिक्स चेकआउट कर सकते हैं

AmanAgarwal041 17 जन॰ 2019

मुझे लगता है कि ऐसा करने का एक आसान तरीका है:

3 सरल कदम:

अगली-सीएसएस प्लगइन स्थापित करें:

npm install --save @zeit/next-css

निम्नलिखित सामग्री के साथ अपनी रूट निर्देशिका next.config.js में बनाएँ:

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

अब आप इस तरह से node_modules से स्टाइलशीट आयात करने में सक्षम होना चाहिए:

import 'bootstrap-css-only/css/bootstrap.min.css';

_नोट: अगला वी 8+_ का उपयोग करना

पृष्ठभूमि:
मैंने नोड_मॉड्यूल के रूप में स्थापित सीएसएस को आयात करने की कोशिश में कुछ घंटे बिताए और विभिन्न समाधान ज्यादातर हैकी वर्कअराउंड हैं, लेकिन जैसा कि ऊपर दिखाया गया है, एक सरल समाधान है।
यह कोर टीम के सदस्यों में से एक द्वारा प्रदान किया गया था: https://spectrum.chat/next-js/general/ignoring-folders-files-specific-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq 20 मार्च 2019

👍18 🎉12 ❤7

यदि कोई @sergiodxa के उत्तर का उपयोग कर रहा है, यदि आप फ़ोल्डर का नाम static रखते हैं तो लिंक टैग का संदर्भ static होना चाहिए।

garrettmaring 14 नव॰ 2019

😂 ऐसा लगता है कि लोग आधिकारिक दस्तावेज़ीकरण से अधिक GitHub मुद्दों को पढ़ते हैं (https://github.com/zeit/next-plugins/tree/master/packages/next-css)

mtrabelsi 14 नव॰ 2019

@mtrabelsi , यह समस्या दस्तावेज़ीकरण imo से अधिक मूल्यवान है, यदि आप सीधे css का उपयोग करना चाहते हैं, उदाहरण के लिए import 'bootstrap-css-only/css/bootstrap.min.css'; , तो दस्तावेज़ीकरण में कुछ भी उल्लेख नहीं है जब तक कि मुझे @Vrq का उत्तर नहीं मिला

Tokenyet 24 नव॰ 2019

👍1

@timneutkens

मैं सिर्फ अपनी सामान्य सीएसएस फ़ाइल आयात करने की कोशिश कर रहा हूं। अंत में https://github.com/zeit/next-plugins/tree/master/packages/next-css में प्रलेखन का उपयोग करके इसे आयात करने का सही तरीका है
या 2017 में @sergiodxa उत्तर का उपयोग करने का सही तरीका है, जो <Head> टैग में एक लिंक के माध्यम से आयात करता है?

यहाँ मैंने अपने अंत में क्या पाया है:

जब आप किसी पृष्ठ को सीधे लोड करते हैं तो दोनों विधियां काम करती हैं (सीधे url पर जाएं)
जब आप राउटर.पुश के साथ पहली बार किसी पृष्ठ पर नेविगेट करते हैं तो केवल सर्जियोस तरीका काम करता है (अगले-सीएसएस दस्तावेज़ीकरण के तरीके का उपयोग करके सीएसएस लोड नहीं होता है)
सर्जियो के रास्ते में केवल समस्या यह है कि राउटर.पुश के साथ पहली बार किसी पृष्ठ पर जाने पर मुझे अभी भी अस्थिर एचटीएमएल का फ्लैश दिखाई देता है

कोई भी विचार इस फ्लैश से कैसे बचा जाए, मेरे सीएसएस को _document फ़ाइल में शामिल करने की आवश्यकता के बिना?

इसकी प्रशंसा करना।

Ollynov 3 दिस॰ 2019

Next.js पर आने वाली CSS सहायता के लिए #8626 देखें!

Timer 3 दिस॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Next.js: अगली परियोजना में सीएसएस शामिल करें?

सबसे उपयोगी टिप्पणी

सभी 31 टिप्पणियाँ

संबंधित मुद्दों