programing

Next.js 글로벌 CSS는 커스텀 이외의 파일에서 Import할 수 없습니다.

easyjava 2023. 3. 10. 22:51
반응형

Next.js 글로벌 CSS는 커스텀 이외의 파일에서 Import할 수 없습니다.

My React App은 글로벌 CSS를 사용하여 정상적으로 동작하고 있었습니다.

npm i next-images " " " , " "next.config.js,ran npm run dev이 

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

문서를 확인했습니다만, React를 처음 접하기 때문에 설명이 조금 혼란스럽습니다.

또, 이 에러는 왜 지금 발생하고 있는 것입니까?npm 설치와 관련이 있다고 생각하십니까?

코드와 함께 추가한 새 파일을 제거하려고 했지만 문제가 해결되지 않습니다.또한 Read more:가 제안하는 것도 시도해 보았습니다.

최고의 컴포넌트입니다.

import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Bitcoin Watcher</title>
    </Head>
    <Navbar />
    <div className="marginsContainer">
      {props.children}
    </div>
  </div>
);

export default Layout;

다음.config.js

// next.config.js
  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

main.scss 파일

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

my global.scss

body {
  margin: 0;
}
:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
  }
}

가장 이상한 점은 이 에러는 CSS 또는 Layout.js와 아무런 관계도 없이 발생하며 이전에 동작하고 있었다는 점입니다.

main.scss Import를 pages/_app.js 페이지로 이동했는데 스타일이 아직 도착하지 않았습니다._app.js 페이지는 다음과 같습니다.

import '../global-styles/main.scss'

export default function MyApp({ Component, props }) {
  return <Component {...props} />
}

레거시 대신 내장 Next.js CSS 로더(여기를 참조)를 사용합니다.@zeit/next-sass.

  1. @zeit/next-sass로로 with with로 sass.
  2. 하다.next.config.js「CSS」입니다.
  3. 오류 메시지에서 제시된 대로 글로벌 CSS를 이동합니다.

9.2 는 Custom Next.js 9..<App>★★★★★★ 。

// pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

특정 컴포넌트 또는 페이지에만 스타일을 추가하려면 CSS 모듈의 내장 지원을 사용할 수 있습니다.(여기를 참조)

를 컴포넌트가 Button.js 파일 Sass를 만들 수 .button.module.scss컴포넌트에 포함합니다.

Next.js에 '불만'이 이 중지됩니다.module 짓기 변경)import '../global-styles/main.scss';로로 합니다.import '../global-styles/main.module.scss';하고 자신의 을 만들 수 .global-styles 예를 「」의 「」를해 주세요component.

'/'에 추가 .next.config.js필수 항목입니다.

고집불통(및 지나치게 복잡한)을 대체할 수 있습니다.다음 JS CSS 로더에는 자신의 로더가 있습니다.글로벌 css를 위한 간단한 예를 다음에 제시하겠습니다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Find and remove NextJS css rules.
    const cssRulesIdx = config.module.rules.findIndex(r => r.oneOf)
    if (cssRulesIdx === -1) {
      throw new Error('Could not find NextJS CSS rule to overwrite.')
    }
    config.module.rules.splice(cssRulesIdx, 1)

    // Add a simpler rule for global css anywhere.
    config.plugins.push(
      new MiniCssExtractPlugin({
        experimentalUseImportModule: true,
        filename: 'static/css/[contenthash].css',
        chunkFilename: 'static/css/[contenthash].css',
      })
    )

    config.module.rules.push({
      test: /\.css$/i,
      use: !isServer ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'],
    })
    return config
  },
}

는 '.exports'에서의 module입니다.next.config.js와 같은 줄서기하다

const withPlugins = require('next-compose-plugins')
const sass = require('@zeit/next-sass')
const css = require('@zeit/next-css')

const nextConfig = {
    webpack: function(config){
    config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
        loader: 'url-loader',
            options: {
            limit: 100000,
            name: '[name].[ext]'
        }}
    })
    return config
    }
}

module.exports = withPlugins([
    [css],
    [sass, {
        cssModules: true
    }]
], nextConfig)

module.exports = {
    env: {
        MONGO_URI = 'your uri'
    }
}

1수출 모듈을 이렇게 변경하기 위해 수정했습니다.

const nextConfig = {
    webpack: function(config){
    config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
        loader: 'url-loader',
            options: {
            limit: 100000,
            name: '[name].[ext]'
        }}
    })
    return config
    },
    env: {
        MONGO_URI: "your uri"
    }
}

2 두 번째.exports module.exports를 했습니다.

도 이걸 더해서 쓰세요._app.js

import '../styles/globals.css'

이 노드 패키지는 이를 위한 완벽한 솔루션을 제공합니다.여기서 찾을 수 있습니다.

수정 절차:

1. 패키지 추가:

npm install next-remove-imports
or
yarn add next-remove-imports

2. 이 래퍼 변수를 next.config.js에 추가합니다.

const removeImports = require('next-remove-imports')({
   test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
   matchImports: "\\.(less|css|scss|sass|styl)$"
 });

의 글로벌 Import 을 다시 하게 하기만 .tsx|ts|js|mjs|jsx 삭제

3. 이 next-remove-imports 래퍼로 다음 설정 내보내기를 랩합니다.다음과 같은 경우:

module.exports = removeImports((nextConfig)

4. 리액트 앱을 재시작하면 CSS 파일을 Import할 수 있습니다.ts|js|js|jsx|mjs파일 또는 컴포넌트.

sss 파일 이름에 ".module"을 포함시켜 보십시오.

main.scss로로 합니다.main.module.scss

예:

import styles from './todolist-profile-info.module.scss'

도 할 .next.config.js.

Bootstrap과 같은 글로벌 css를 사용하고 있다고 가정합니다.즉, 어플리케이션 전체와 어플리케이션 내의 모든 다른 페이지에 적용되는 css가 포함되어 있습니다.

글로벌 css 파일은 매우 특별한 방법으로 NextJs에 배선해야 합니다.

그래서 그 안에pages/해야 할 _app.js.

파일의 이름을 지정하는 것이 중요합니다._app.js.

그런 다음 이 파일의 맨 위에서 다음 방법으로 부트스트랩 css를 Import합니다.

import 'bootstrap/dist/css/bootstrap.css';

그런 다음 다음을 추가합니다.

export default ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

그래서 그 암호는 어떻게 되어가고 있는거죠?

백그라운드에서 NextJs를 페이지로 이동하려고 하면 NextJs는 ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲NextJs ▷▲NextJs ▷▲NextJs ▷▲NextJs▼▲NextJs▼▲NextJextJs▼의 다른 파일 중 하나에서 컴포넌트를 Import합니다.pages/디렉토리로 이동합니다.

NextJS는 단순히 컴포넌트를 화면에 표시하는 것이 아닙니다.

대신 자체 커스텀 디폴트 컴포넌트 내에서 랩핑하고 NextJS 내부에서는 App이라고 부릅니다.

「 」를 을 하고 _app.js사용자 정의 앱 구성 요소를 정의하는 것입니다.

컴포넌트를 NextJS 합니다.AppComponent처 Component

★★★★★★★★★★★★★★★★★.Component.pages/디렉토리로 이동합니다. 다음에 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ.pageProps 、 、 is 、 is 、 inside inside inside of of of of of of of of inside inside inside inside inside inside inside inside inside inside inside inside inside inside inside inside 에 전달하려는 입니다.pages/.

간단히 말하면, 이것은 화면에 보여주려는 컴포넌트의 얇은 포장지 같은 것입니다.

왜 이걸 정의해야 하죠?

등 css를 수 있는 것은 "css"_app.jsfilename을 클릭합니다.

다른 컴포넌트나 다른 페이지를 방문하려고 해도 NextJs는 이러한 파일을 로드하거나 해석조차 하지 않는 것으로 나타났습니다.

따라서 Import한 cSS는 최종 HTML 파일에 포함되지 않습니다.

따라서 모든 페이지에 포함되어야 하는 글로벌 css가 있습니다. 사용자가 애플리케이션에 액세스할 때마다 로드되는 것이 보장되는 유일한 파일이기 때문에 앱 파일로 가져와야 합니다.

css를 Import하는 것 외에_app.js、 ,た 、 ,た 、npm install bootstrap를 참조해 주세요.

상세한 것에 대하여는, https://nextjs.org/docs/messages/css-global 를 참조해 주세요.

저는 프로젝트의 부모 폴더에 부적절한 이름을 붙이고 특수 문자를 사용했기 때문에 이 오류가 발생했습니다.

맘에 들다project#1,

특수 문자를 제거하고 폴더 이름을 like로 변경한 후project-1,오류가 사라졌습니다.

제 경우 navbar.module.css에 오타가 있었습니다.navbar.moduile.css 라고 써놨습니다.

모든 컴포넌트 css/scss에 대해 navbar.module.css/scss/sass.다음 js는 navbar.css/scss/sass를 컴파일하지 않습니다.내 대답이 너에게 도움이 되었으면 좋겠어!

언급URL : https://stackoverflow.com/questions/60941853/next-js-global-css-cannot-be-imported-from-files-other-than-your-custom-app

반응형

'programing' 카테고리의 다른 글

Ajax를 통한 레일 플래시 알림  (0) 2023.03.10
각도에서는 페이지 변경과 같은 사용자 이벤트에서 $interval을 취소하려면 어떻게 해야 합니까?  (0) 2023.03.10
spring boot web-client에서 콘텐츠타입 어플리케이션/x-www-form-urlencoded 폼 데이터 요청을 게시하는 방법  (0) 2023.03.10
콘솔에 표시:네트워크 속도가 느리다.로드하는 동안 예비 글꼴이 사용됩니다.  (0) 2023.03.10
키와 값의 페어를 타입 스크립트에서 사용할 수 있습니까?  (0) 2023.03.10

'programing'의 다른글

  • 현재글Next.js 글로벌 CSS는 커스텀 이외의 파일에서 Import할 수 없습니다.

관련글

댓글

티스토리툴바