자체 클래스 이름의 범위를 지정하는 Linaria를 사용하려고 하는 것과 동일한 문제에 직면하고 있습니다. 생성하는 CSS 파일이 .module.css 끝나지는 않지만 "모듈"입니다. 라이브러리와 쉽게 통합할 수 있는 방법이 필요합니다.

왜 nextjs로 다시 전환했습니까?

또한 node_modules 외부에서 GlobalCSS를 사용할 수 있기를 바랍니다. 이것은 CSS 모듈을 점진적으로 채택하는 데 도움이 될 것입니다.

네 이것은 매우 중요합니다! 많은 npm 패키지가 nextjs에서는 작동하지 않지만 CRA 또는 다른 프레임워크에서는 작동합니다.

@use 지원 및 sass 모듈과 같은 dart sass의 js 구현과 함께 이것을 사용하려는 다른 사람을 위해, node-sass에 종속성이 있는 다른 노드 모듈이 있는 경우 기본 다음 설정 sass 대신 node-sass를 사용합니다. 로컬에서 다음을 수행하여 문제를 해결했습니다.

// example next.config.js
module.exports = {
webpack(config, options) {
  config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            const nestedScss = rule.oneOf.find((one) => {
              return one.test
                && 'some.scss'.match(one.test) 
                && one.issuer 
                && one.issuer.include 
                && one.issuer.include.includes('_app');
            });
            if (nestedScss) {
              const sassLoader = nestedScss.use.find(u => u.loader.includes('sass-loader'));
              // Set implementation to sass instead of node-sass here.
              sassLoader.options.implementation = require('sass');
            }
          }
        })
  }
}

그런 다음 _app.js 에서 scss 파일을 가져와야 합니다.

@smurrayatwork 코딩이 아니라 해킹입니다 죄송합니다

또한 _app.js 전용이라는 제한도 약간 번거롭습니다.

모든 곳에서 CSS 참조를 지원하지 않으려면 _app (다른 곳에서는 참조되지 않음)의 직접적인 종속성에서도 CSS를 참조할 수 있도록 만들 수 있습니까?
즉. _app (그리고 다른 곳은 아님)에서 요구하는 경우 CSS에 가져오기를 기반으로 하는 결정적 순서를 제공하는 것이 좋습니다.

이상적이지는 않지만 내가 가진 사용 사례는 공유 CSS를 가져오는 공유 모듈을 가져오는 여러 응용 프로그램에서 공유하는 하나의 코드베이스라는 것입니다. 모든 애플리케이션에 대해 _app.js에서 공유 CSS 가져오기를 복제하고 싶지 않습니다. 현재 이 문제를 해결하려면 다른 모듈에서 CSS를 요구할 수 없기 때문에 멋진 js 메타프로그래밍을 해야 합니다.

대신 모든 공유 CSS를 가져오는 "App Factory"가 있는 현재 접근 방식을 사용하고 싶습니다. 그런 다음 _app은 팩토리를 사용하고 공유 CSS 위에 자체 CSS를 가져옵니다.

이 문제와 관련이 있다고 생각하여 https://github.com/vercel/next.js/discussions/13991 을 추가하고

이것에 +100. 노드 모듈 CSS 파일을 복사하여 프로젝트에 붙여넣고 .module.css를 추가해야 합니다.

여기 또 다른 예가 있습니다.

pdf-viewer-reactjs 패키지의 경우 종속성에는 _app.js 에서 가져와야 하는 CSS도 필요합니다.

이것은 전체 앱에 대한 CSS를 부풀리게 하고 이 단계에서 충돌에 대해 확신할 수 없습니다.

import 'react-quill/dist/quill.snow.css';
import 'react-image-crop/dist/ReactCrop.css';
가져오기 '../../node_modules/material-design-icons/iconfont/material-icons.css';
가져오기 '../../node_modules/bulma/css/bulma.css';
가져오기 '../../node_modules/bulma-helpers/css/bulma-helpers.min.css';

또한 다음은 콘솔에 출력됩니다.

경고 - ./node_modules/material-design-icons/iconfont/material-icons.css
전역 CSS는 node_modules 내에서 가져올 수 없습니다.
더 읽어보기: https://err.sh/next.js/css-npm
위치: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
전역 CSS는 node_modules 내에서 가져올 수 없습니다.
더 읽어보기: https://err.sh/next.js/css-npm
위치: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
전역 CSS는 node_modules 내에서 가져올 수 없습니다.
더 읽어보기: https://err.sh/next.js/css-npm
위치: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/material-design-icons/iconfont/material-icons.css
모듈 빌드 실패: 오류: 최종 로더(./node_modules/next/dist/build/webpack/loaders/error-loader.js)가 버퍼 또는 문자열을 반환하지 않았습니다.

./node_modules/bulma/css/bulma.css
모듈 빌드 실패: 오류: 최종 로더(./node_modules/next/dist/build/webpack/loaders/error-loader.js)가 버퍼 또는 문자열을 반환하지 않았습니다.

./node_modules/bulma-helpers/css/bulma-helpers.min.css
모듈 빌드 실패: 오류: 최종 로더(./node_modules/next/dist/build/webpack/loaders/error-loader.js)가 버퍼 또는 문자열을 반환하지 않았습니다.

안녕 ! 누군가가 이것을 어떻게 해결했습니까? 그 때문에 가져올 수 없는 노드 모듈이 너무 많습니다.

구성 요소에서 전역 스타일을 사용하는 것은 next.config.js 를 통해 활성화되거나 NextJS의 모범 사례/의견을 위반하는 것에 대한 우려가 있는 경우 전역 스타일에 대한 못생긴 콘솔 경고가 표시될 수 있습니다.

그러나 이것은 CRA > NextJS에서 변환하는 사용자에게 중요합니다. 그것은 우리가 전환할 수 없고 CSS 모듈과 같은 것을 점진적으로 채택할 수 없는 우리를 위한 차단기입니다.

여전히 이 문제를 해결할 수 없습니다. 내 자신의 필요에 따라 사용자 정의 CSS 처리기를 사용했지만 이것은 내장 CSS 지원을 비활성화하지만 모든 경우에 좋은 솔루션은 아닐 수 있습니다. 아래는 권장하지 않습니다 . 패키지 작성자가 정리할 때까지만 사용하십시오.

next.config.js

const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
...
module.exports = withPlugins([
...
withCSS,
]);

@abdelrahmantoptal 's SASS에서 작동하는 방법을 알고 있습니까?

CSS에서 작동하는 것처럼 보이지만 SASS 가져오기가 발생하면 오류가 발생합니다.

error - ./src/components/layouts/Footer.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <strong i="8">@import</strong> 'styles/vars';
| 
| footer {

그래서 withCSS 플러그인을 사용하기 전에 웹팩 설정에 SASS 로더를 추가해 보았습니다.

      config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader'
        ]
      });

그러나 그 원인은 다음과 같습니다.

error - ./src/components/App.scss
ReferenceError: self is not defined

나는 또한 @zeit/next-sass 대체하려고 시도했지만 동일한 오류가 발생했습니다.

error - ./src/components/App.scss
ReferenceError: self is not defined

SASS를 사용하도록 코드를 조정하는 방법에 대한 제안 사항이 있습니까?

누군가가 https://github.com/balena-io-modules/rendition을 성공적으로 구현 했습니까?

https://github.com/balena-io-modules/rendition/issues/1164

저는 이제 Gatsby와 곧 Next.js를 폐기했습니다. 이 기능과 같이 작지만 매우 차단되고 독단적인 기능 때문입니다. 이 오류를 해결할 수 없기 때문에 이제 CKEditor 5용 CodeBlock 플러그인을 사용할 수 없습니다. 이러한 구성을 순환할 수 있는 방법이 항상 있어야 합니다.

이 문제에 대해 @Timer 또는 받는 것이 매우 도움이 될 것입니다. 이것은 Next.js의 큰 문제입니다. 이 문제를 해결할 계획이 있습니까?

동의! 노드 모듈에 CSS를 사용하는 것은 매우 일반적입니다. 개발자로서 저는 다른 개발자가 노드 모듈을 구성하는 방법을 제어할 수 없으며 다른 개발자는 노드 모듈에 CSS를 넣는 것이 웹 프레임워크를 손상시킬 것이라고 기대하지 않습니다.

@OssiPesonen 이거 본 적 있어 ? 이 해결 방법은 이상적이지는 않지만 그 동안 문제를 해결했습니다.

@OssiPesonen 이거 본 적 있어 ? 이 해결 방법은 이상적이지는 않지만 그 동안 문제를 해결했습니다.

이게 어떻게 도움이 되는지 모르겠어? 문제는 노드 모듈에서 일부 CSS 파일을 수동으로 가져와야 하는 것이 아닙니다. 문제는 CSS 가져오기를 자체적으로 수행하는 npm 패키지입니다. 다음과 같은 행을 포함하는 패키지:

import '../theme/stylesheet.css'

next.js가 복수로 충돌을 일으킬 것입니다. 그리고 분명히 유지 보수의 조언은 다음과 같습니다.

유지 관리자에게 연락하여 종속성의 컴파일된 버전을 게시하도록 요청하십시오.

사람들은 어떤 종류의 환상의 나라에 살고 있습니까? 유지 관리자에게 연락하여 매우 빠른 속도로 패키지를 다시 컴파일하도록 요청할 수 있다고 생각합니까? 이것은 몇 주 동안 누구에게나 방해가 될 것입니다! 이 티켓은 4개월 동안 오픈되었습니다. 빠르게 움직이는 프로젝트에서 작업할 때는 허용되지 않습니다.

다음 주(카나리아에서) 내에 node_modules 에서 모든 구성 요소 파일로 CSS를 가져올 수 있습니다! 테스트 준비가 되면 여기에 게시하겠습니다.

릴리스 이전에 누군가가 이것을 필요로 하는 경우 CSS를 가져오는 node_modules 에서 모듈을 트랜스 파일 하기 위해

@BrandonE 는 next-transpile-modules에 *.module.css 라는 모듈이 여전히 필요한 것 같습니다. 그 방법을 찾으셨나요?

@rjoaopereira 나는 이것이 어떻게 작동하는지 깊이 이해하고 있다고 말할 수는 없지만 CSS를 가져온 대부분의 node_modules 는 @zeit/next-css 플러그인에서만 작동했습니다. 한 가지만 그렇지 않았으며 이 시점에서 트랜스파일로 문제가 해결되었습니다. 우아한 솔루션과는 거리가 멀고 Next.js의 미래 버전에서는 Babel/Webpack 연금술에 더 적은 시간을 할애하고 웹 애플리케이션을 만드는 데 더 많은 시간을 할애할 수 있기를 바랍니다.

다음 변경 사항으로 거의 작동하게 되었습니다.

다음 9.5.3
다음 트랜스파일 모듈 4.1.0
감성을 담은 퍼스트 파티 구성 요소.
CSS 모듈과 글로벌 CSS가 혼합된 타사 구성 요소

scopedcomponents 는 사용 중인 타사 구성 요소로 교체됩니다.

//next.config.js
const withCustomWebpack = require("./webpack-custom.config");
const withNextCSSOverride = require("./next.config.css");
const withTM = require("next-transpile-modules")(["@scopedcomponents"]);

module.exports = withCustomWebpack(
  withTM(
    withNextCSSOverride({
      poweredByHeader: false
    })
  )
);

///next.config.css.js
const {
  getCssModuleLocalIdent
} = require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent");
const path = require("path");
/**
 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
 */
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      const nextCssLoaders = config.module.rules.find(
        rule => typeof rule.oneOf === "object"
      );

      if (nextCssLoaders) {
        const nextCssLoader = nextCssLoaders.oneOf.find(
          rule =>
            rule.sideEffects === false &&
            regexEqual(rule.test, /\.module\.css$/)
        );

        if (nextCssLoader) {
          /***********************************************************
           * change the rule to match all scopedcomponents css files
           ***********************************************************/
          nextCssLoader.test = /(@scopedcomponents|react\-virtualized)\/.*\.css$/;

          const cssLoader = nextCssLoader.use.find(({ loader }) =>
            loader.includes("css-loader")
          );

          if (cssLoader) {
            /***********************************************************
             * Override the default behaviour for CSS modules discovery
             * auto = true makes webpack search for *.module.css
             * https://webpack.js.org/loaders/css-loader/#auto
             ***********************************************************/
            cssLoader.options.modules.auto = /@scopedcomponents\/.*\.css$/;
            /***********************************************************
             * Nextjs overrides the default mode to "Pure"
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L35
             * Put it back to normal
             ***********************************************************/
            cssLoader.options.modules.mode = "local";
            /***********************************************************************************************************************
             * There is a problem when using components built with css-modules with Nextjs.                                        *
             * NextJS will consume code from `lib` on the server side and from `es` on the client.                                 *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack-config.ts#L374                            *
             * This raises a problem when generating the classes for different environments,                                       *
             * throwing an error of className mismatch due to the hash created being based on the file path                        *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L26  *
             * https://github.com/webpack/loader-utils/blob/v1.4.0/lib/interpolateName.js#L39                                      *
             * To solve this, when generating the classNames for 3rd party components,                                                 *
             * we need to tell cssloader to always use the same path                                                               *                                                                          *
             *                                                                                                                     *
             *  https://github.com/zeit/next-plugins/issues/595                                                                    *
             ***********************************************************************************************************************/
            cssLoader.options.modules.getLocalIdent = (
              context,
              localIdentName,
              localName,
              options
            ) => {
              const newContext = { ...context };
              if (newContext.resourcePath.includes("@scopedcomponents")) {
                newContext.resourcePath = newContext.resourcePath.replace(
                  `${path.sep}es${path.sep}`,
                  `${path.sep}lib${path.sep}`
                );
              }
              return getCssModuleLocalIdent(
                newContext,
                localIdentName,
                localName,
                options
              );
            };
          }
        }
      }

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

문제:

• 더 이상 개발 모드에 SSR이 없습니다. 생산 작업.
• 프로덕션에서는 여전히 CSS가 재정의되지만 dev에서는 재정의되지 않습니다. 이는 https://github.com/vercel/next.js/issues/11448 및 https://github.com 에서 언급한 대로 next-css를 제거한 동기였습니다.

@Timer 이에 대한 업데이트가 있습니까?

다음 주(카나리아에서) 내에 node_modules 에서 모든 구성 요소 파일로 CSS를 가져올 수 있습니다! 테스트 준비가 되면 여기에 게시하겠습니다.

이 수정 후에 구성 요소에서 CSS를 동적으로 가져올 수 있습니까?

@Timer 님 정말 감사합니다.

next@^9.5.4-canary.10 사용하면 애플리케이션의 어디에서나 node_modules 에서 전역 CSS를 가져올 수 있습니다. 이렇게 하면 CSS를 가져와야 하지만 전체 애플리케이션의 번들 크기를 늘리는 것을 원하지 않는 타사 React 라이브러리와의 상호 운용성이 향상됩니다.

@Timer 그 릴리스가 너무 기대됩니다. 작업에 정말 감사드립니다 💯 ❤️

@Timer 님 감사

이것은 현재 저에게 차단 문제였습니다. 그러나 오늘 이것을 테스트했을 때 여전히 동일한 오류 메시지가 표시됩니다. 단순히 9.5.4-canary-10으로 업그레이드하는 것 외에 다른 것이 있습니까? 이 예는 타사 lib @rmwc 를 사용하려고 합니다.

@johmike 다음 구문을 사용하여 가져

import "@rmwc/avatar/avatar.css";

next 최신 버전을 설치한 후 개발 서버를 다시 시작해 보셨습니까?

@Timer 이 기능에 대해 node_modules 폴더에서 CSS 파일을 가져올 때 잘 작동합니다.

import 'prism-themes/themes/prism-darcula.css';

node_modules 디렉토리 외부의 글로벌 CSS 가져오기를 지원할 계획이 있습니까?

@sasivarnan
이것은 @rmwc 구성 요소를 가져오는 다른 라이브러리에서 가져옵니다. 해당 라이브러리는 @require("@rmwc/avatar/avatar.css") 있습니다. import {Avatar} from "library/Avatar" 가져오고 있는데 실패합니다.

@sasivarnan

이것은 @rmwc 구성 요소를 가져오는 다른 라이브러리에서 가져옵니다. 해당 라이브러리는 @require("@rmwc/avatar/avatar.css") 있습니다. import {Avatar} from "library/Avatar" 가져오고 있는데 실패합니다.

알았어요. 나는 그것이 당신의 응용 프로그램에서 직접 가져온 것이라고 생각했습니다. 내 잘못이야.

여기에 있는 의견으로 판단하면 이것은 실제로 해결되지 않았거나 해결되었지만 여기에서 많은 사람들이 다른 문제를 보고합니다. 많은 사람들은 여전히 ​​패키지 자체(패키지 파일 내부의 import style.css 문)에서 CSS를 가져오는 모듈을 가져올 수 없습니다.

수정 사항은 앱이 node_modules/ 경로에서 CSS를 가져올 수 있도록 하는 것으로 보이지만 이 문제를 해결할 수 있는 아주 쉬운 방법이 있습니다. 수정될 때까지 지금은 CSS를 앱에 복사하기만 하면 됩니다. 차단 수준의 문제가 아닙니다. 그래서 딱히 손쉬운 해결책이 없는 블로커 문제를 해결하지는 못했다. import 문이 있는 구성 요소를 패키지 자체에 포함된 CSS 파일로 가져오면 앱이 충돌합니다.

@sasivarnan @OssiPesonen 두 분 모두 이 OP 문제에서 논의되고 수정된 것과 다른 문제에 대해 이야기하고 있는 것 같습니다.

이것은 특히 애플리케이션에서 CSS를 가져와야 하는 라이브러리를 수정합니다. 예를 들면 다음과 같습니다.

// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
  return <Slider min={0} max={200} step={10} />;
}

당신이 말하는 것은 #706과 #13282의 복제 또는 node_modules 자사 코드처럼 취급하는 기능입니다.

@Timer 방금 예상되는 사용 사례를 테스트했으며 실제로 제대로 작동합니다.

구성 요소의 CSS를 다음 구조의 일부로 직접 가져올 때 예상대로 작동하며 오류가 없습니다.
그러나 해당 구성 요소를 다음 구조 외부의 다른 패키지로 이동하고 해당 패키지를 빌드한 다음 설치하면 이전과 동일한 오류로 장애 복구됩니다.

이 예에서 Avatar 구성 요소를 사용하지도 않고 Button 가져오고 있지만 Avatar 는 실패한 오류이므로 다른 일이 진행 중일 수 있습니다.

또한 monorepo에서 작업할 때 next-transpile-modules 를 추가했지만 이 특정 문제에는 도움이 되지 않는 것 같습니다.

next-transpile-modules 주변의 다른 많은 문제를 파헤쳐서 이상한 구성 파일로 이것을 작동시켰습니다.

const withCSS = require("@zeit/next-css");
module.exports = withCSS();
require.extensions[".css"] = () => {
  return;
};

나는 next-transpile-modules 제거했고 이것은 작동합니다. 이유는 모르겠지만 아무 일도 하지 말아야 할 것 같은데요?

내가 너무 빨리 말했다! next dev 에서는 작동하지만 next build 는 CSS 파일 중 하나의 unknown token . (점) 오류로 실패합니다.

@Timer 어떤 생각이 있습니까? 모노리포지토리와 여러 패키지에서 즉시 작동해야 합니까? 아니면 @team/packageA가 node_modules에서 CSS를 가져온 다음 @team/packageB로 가져올 수 있도록 구성해야 하는 다른 것이 있습니까?

해당 동작에 대해 https://github.com/vercel/next.js/issues/13282 를 따를 수 있습니다.

[email protected] 을 사용하면 내 응용 프로그램의 어느 곳에서나 CSS를 가져올 수 있습니다. 그러나 scs 파일에서도 마찬가지입니까? 페이지 에서 실제로 사용하고 있는 scss 파일만 가져오고 싶습니다.

// 페이지/_app.tsx
import '../styles/common.scss'

// 페이지/index.tsx 버튼을 사용합니다.
import '@mynpm/custom-ui/_Button.scss'

// 페이지/about.tsx 캐러셀을 사용합니다.
import '@mynpm/custom-ui/_Carousel.scss'

https://nextjs.org/docs/basic-features/built-in-css-support 의 예

오류를 반환합니다.
오류 - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
전역 CSS는 node_modules 내에서 가져올 수 없습니다.
더 읽어보기: https://err.sh/next.js/css-npm

https://nextjs.org/docs/basic-features/built-in-css-support 의 예

오류를 반환합니다.
오류 - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
전역 CSS는 node_modules 내에서 가져올 수 없습니다.
더 읽어보기: https://err.sh/next.js/css-npm

최신 버전의 Next.js를 사용 중인지 확인하세요.

죄송합니다. 이전 댓글에서 지정하지 않았습니다. 버전 9.5.5를 사용했습니다. npm에서 방금 업데이트했습니다.

모든 .next 캐시를 지웠고 이제 예상대로 작동합니다.

_app --> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css"; 여전히 버전 9.5.5 오류가 있습니다.