Next.js: 다음 프로젝트에 CSS를 포함하시겠습니까?

에 만든 2016년 11월 27일 · 31코멘트 · 출처: vercel/next.js

나는 Next가 Glamour와 css-in-js를 사용한다는 것을 알고 있습니다. 하지만, Next 프로젝트에서 실제 css/less/scss를 사용할 수 있는 방법은 없을까요...어쩐지? 적어도 프로젝트를 부트스트랩하기 위해서는?

내 추론은 이것입니다. Next가 대상으로 하는 사이트와 같은 간단한 사이트의 경우 온라인에서 구입할 수 있는 대부분의 미리 만들어진 html 테마는 순수한 html과 css를 사용하여 만들어집니다. 따라서 HTML을 반응 구성 요소로 자르고 적절한 페이지 폴더에 넣으면 완료됩니다.

내 프로젝트에 Next를 사용하고 싶지만 기성 CSS를 어떻게든 활용할 수 없다면 거래 차단기가 될 것입니다. 이 사용 사례에 대한 솔루션이나 해결 방법이 있습니까?

출처

manolkalinov

가장 유용한 댓글

$#$ /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 에 2016년 11월 27일

👍79 👎17 🎉7 ❤2 🚀1

모든 31 댓글

$#$ /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 에 2016년 11월 27일

👍79 👎17 🎉7 ❤2 🚀1

와우, 빠른 답변 감사합니다 :). 효과가있다! 단 하나의 걸림돌이 있습니다. 페이지를 처음 로드할 때 모든 것이 제대로 렌더링되기 직전에 스타일이 지정되지 않은 html이 깜박입니다. 반응 후 로드된 css 또는 js 파일에서 온 것인지 확실하지 않습니다. 이에 대한 해결 방법이 있습니까?

어쨌든 나는 너희들이 하는 일에 절대적으로 감명을 받았고 빠른 답변에 다시 한 번 감사드립니다!

manolkalinov 에 2016년 11월 28일

신경 쓰지 마세요. 인덱스 페이지에서도 css 및 js 링크가 있는 헤더 구성 요소를 가져왔는데 플래시가 사라졌습니다. 또한 앵커 태그를 링크 구성 요소로 변경하면 남은 점프가 제거됩니다. 단점은 Link 구성 요소가 자식에서 모든 html 태그(아이콘 클래스가 있는 span 태그 등)를 제거하여 텍스트만 남게 된다는 것입니다.

나는 이 사용 사례가 정확하고 최적화된 것과 반대라는 것을 알고 있지만 빠르고 더러운...추함에 의지해야 하는 경우에 정말 유용합니다. :)

따라서 미리 만들어진 html 테마를 통합하는 워크플로는 다음과 같습니다.

정적 폴더를 만들고 템플릿에서 모든 js/css/img 파일을 복사/이동합니다.
구성 요소가 있는 page.js 파일 만들기
구성 요소에 html을 추가하고 반응을 준수하도록 수정합니다.
3.1. Head 태그를 추가하고 원본 html의 모든 css/js 파일을 포함합니다.
3.2. 새 정적 폴더와 일치하도록 해당 파일의 경로를 업데이트합니다.
3.3. head 태그 아래에 html 복사/붙여넣기
3.4 닫히지 않은 html 태그(링크, 입력 및 img 태그 포함) 닫기 또는 자체 닫기
3.5. class="의 모든 인스턴스를 className="으로 찾기/바꾸기
3.6. 모든 HTML 주석 제거

manolkalinov 에 2016년 11월 28일

👍9 🎉3 😄3

@manolkalinov 쉽게 참조할 수 있도록 코드를 추가해 주시겠습니까? 워크플로를 작성하셨다는 것을 알고 있지만 샘플 코드를 사용하면 문제가 발생할 경우 더 쉽게 따르고 디버그할 수 있습니다.

ralphievolt 에 2016년 11월 29일

👍1

head 태그에 CSS를 추가하면 확실히 작동합니다. 그러나 그것은 일종의 해키이며 postcss 또는 sass 와 같은 것을 사용하려면 어떻게 해야 합니까? 기존 CSS 스타일을 매력적인 JSON 객체로 변환하는 방법은 무엇입니까? 디자이너가 glamor 를 사용하여 페이지의 스타일을 지정하는 것도 매우 어렵습니다. 더 나은 방법이 있어야 합니다.
그건 그렇고, CSS 모듈과 비교하여 glamor 사용의 이점은 무엇입니까?

dzcpy 에 2016년 11월 30일

👍6

@andyhu 는 https://github.com/zeit/next.js#faq 에서 glamor 사용의 이점에 대해 읽어보세요.
postcss 또는 sass 에 대해 webpack 구성을 사용자 정의하면 이를 사용할 수 있습니다(https://github.com/zeit/next.js/pull/222). next 를 실행하기 전에 이러한 파일을 CSS로 컴파일하십시오.

nkzawa 에 2016년 12월 01일

해결되었다고 생각합니다. 여전히 문제가 있는 경우 다시 여십시오. @sergiodxa 답변 감사합니다!

nkzawa 에 2016년 12월 01일

@nkzawa 웹팩 구성 사용자 지정을 사용하므로 프로젝트에서 덜 사용할 수 있습니다. 여기에 내 코드가 있습니다.
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
}

그러면 더 적은 파일 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 에 2017년 01월 05일

당신은 시도해야합니다

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

bkniffler 에 2017년 01월 09일

@kimown less 파일 가져오기에 성공하셨나요? 그렇다면 어떻게 했는지 공유해 주시겠습니까?

crodriguezvega 에 2017년 06월 25일

@sergiodxa node_modules 에서 CSS를 어떻게 가져올 수 있습니까?

saadbinsaeed 에 2017년 07월 19일

👍17

npm 패키지에서 CSS를 가져오는 것과 관련하여 이 질문이 있었습니다.

예: rc-슬라이더

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

notrab 에 2017년 07월 19일

👍12

이에 대한 답이 있었습니까? @notrab

paulwehner 에 2017년 08월 26일

@notrab
이 시도

루트 또는 _document 구성 요소에서

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

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

saadbinsaeed 에 2017년 08월 28일

😕3 👍1

@saadbinsae 나는 이것을 시도했다. 자체 구성 요소 및 페이지에서 작동합니다. 그러나 인라인 대신 webpack과 함께 번들로 만들고 싶습니다.

schoenwaldnils 에 2017년 09월 15일

👍1

@schoenwaldnils 그렇게 하려고 했지만 할 수 없었습니다. 내 이해에 따라 우리는 서버 측 응용 프로그램을 사용하고 있으므로 서버는 CSS가 무엇인지 모르기 때문에 별도의 CSS 파일을 번들로 묶어 클라이언트에 보낼 수 없습니다. html에 CSS를 포함시켜야 합니다. 전체 응용 프로그램에서 액세스하려면 루트 구성 요소에 포함하거나 위에서 @sergiodxa로 표시된 대로 헤더에 연결합니다.

saadbinsaeed 에 2017년 09월 15일

@sergiodx 접근 방식을 시도했지만 작동하지 않습니다. 이것은 최신 버전의 Next에도 계속 적용됩니까?

nickwild-999 에 2017년 10월 14일

@sergiodxa 감사합니다. 그냥 내가 찾고 있었다.

fredybustos 에 2017년 11월 30일

@sergiodxa 당신은 당신의 대답을 변경해야합니다. 그것은 정적 이 아니다! 그것은 정적이어야합니다

ayberkanilatsiz 에 2017년 12월 06일

👍2

CSS 가져오기 사용은 이제 https://github.com/zeit/next-plugins 를 사용하여 간단합니다.

1년 된 문제 범프에 대해 죄송합니다. 분명히 사람들은 Google을 통해 여기까지 왔습니다.

timneutkens 에 2018년 08월 22일

👍1

CSS 가져오기 사용은 이제 https://github.com/zeit/next-plugins 를 사용하여 간단합니다.
1년 된 문제 범프에 대해 죄송합니다. 분명히 사람들은 Google을 통해 여기까지 왔습니다.

설마. node_module에서 직접 CSS를 가져오는 쉬운 방법을 찾지 못하는 것 같습니다. 이것은 의도적으로 설계된 것입니까?

cyberdude 에 2018년 09월 14일

👍6

CSS 가져오기 사용은 이제 https://github.com/zeit/next-plugins 를 사용하여 간단합니다.
1년 된 문제 범프에 대해 죄송합니다. 분명히 사람들은 Google을 통해 여기까지 왔습니다.
설마. node_module에서 직접 CSS를 가져오는 쉬운 방법을 찾지 못하는 것 같습니다. 이것은 의도적으로 설계된 것입니까?

다음 버전 7 이후는 아니지만 이미 살펴 보셨습니까? 이전보다 훨씬 쉽습니다 ;)

mtrabelsi 에 2018년 09월 30일

@mtrabelsi 가 막혔기 때문에 Next.js 7의 노드 모듈에서 CSS를 직접 가져오는 방법을 몇 가지 예를 들어 주시겠습니까? 노드 모듈에서 일부 스타일을 가져와야 하는데 작동하는 솔루션을 찾을 수 없습니다.

bogdan100 에 2018년 11월 13일

copy-webpack-plugin을 사용하여 이 문제를 해결했습니다.
웹팩 구성(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 에 2018년 12월 13일

클라이언트 측 CSS 수정에 대한 수정 사항을 확인할 수 있습니다. https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 에 2019년 01월 17일

더 간단한 방법이 있다고 생각합니다.

간단한 3단계:

next-css 플러그인 설치:

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';

_참고: 다음 v 8+ 사용

배경:
node_module로 설치된 CSS를 단순히 가져오려고 몇 시간을 보냈고 다양한 솔루션은 대부분 해킹된 해결 방법이지만 위에 표시된 것처럼 간단한 솔루션이 있습니다.
핵심 팀 구성원 중 한 명이 제공했습니다. https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq 에 2019년 03월 20일

👍18 🎉12 ❤7

누군가 @sergiodxa 의 답변을 사용하는 경우 폴더 이름을 static 하면 링크 태그는 static 를 참조해야 합니다.

garrettmaring 에 2019년 11월 14일

😂 공식 문서보다 GitHub 문제를 더 많이 읽는 것 같습니다(https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi 에 2019년 11월 14일

@mtrabelsi , 이 문제는 문서보다 더 가치가 있습니다. css를 직접 사용하려는 경우(예: import 'bootstrap-css-only/css/bootstrap.min.css'; ) @Vrq 의 답변을 찾을 때까지 문서에 언급이 없습니다.

Tokenyet 에 2019년 11월 24일

👍1

@timneutkens

내 자신의 일반 CSS 파일을 가져오려고 합니다. 결국 https://github.com/zeit/next-plugins/tree/master/packages/next-css 의 설명서를 사용하여 가져오는 올바른 방법입니다.
또는 <Head> 태그의 링크를 통해 가져오는 2017년 @sergiodxa 답변을 사용하는 올바른 방법입니까?

내가 찾은 것은 다음과 같습니다.

두 방법 모두 페이지를 직접 로드할 때 작동합니다(URL로 직접 이동).
Router.push를 사용하여 처음으로 페이지를 탐색할 때만 Sergios 방식이 작동합니다(next-css 문서의 방식을 사용하면 CSS가 로드되지 않음).
Sergio의 방식에 대한 유일한 문제는 Router.push를 사용하여 처음으로 페이지에 갈 때 스타일이 지정되지 않은 html의 플래시가 여전히 표시된다는 것입니다.

_document 파일에 내 CSS를 포함할 필요 없이 이 플래시를 피하는 방법을 알고 있습니까?

감사합니다.

Ollynov 에 2019년 12월 03일

Next.js에 제공되는 CSS 지원은 #8626을 참조하세요!

Timer 에 2019년 12월 03일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Next.js: 다음 프로젝트에 CSS를 포함하시겠습니까?

가장 유용한 댓글

모든 31 댓글

관련 문제