리액트 앱에서 CSS 모듈을 사용하여 글로벌 스타일을 적용하는 방법은 무엇입니까?

리액트 앱에서 CSS 모듈을 사용하여 글로벌 스타일을 적용하는 방법은 무엇입니까?

저는 현재 CSS Modules with React를 스타일링에 사용하고 있습니다.각 컴포넌트는 다음과 같이 컴포넌트 고유의 css 파일로 Import하고 있습니다.

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

개별 컴포넌트를 스타일링할 때는 정상적으로 동작합니다만, 컴포넌트 고유의 글로벌 스타일링(html, body, 헤더 태그, div 등)은 어떻게 적용합니까?

ES6 가져오기 구문을 사용 중이므로 스타일시트를 가져올 때 동일한 구문을 사용할 수 있습니다.

import './App.css'

수업을 your, 신, 신, 신, 당 등으로 할 수 .:global스코프로 를 들어

:global(.myclass) {
  background-color: red;
}

이 작업은 다음 항목을 추가하는 것만으로 수행할 수 있습니다.

require('./App.css');

(이 질문에 올바르게 답해 주신 @elmeister님 감사합니다.)

같은 문제가 발생하여 다음과 같은 해결 방법을 찾았습니다. 자신에게 가장 적합한 방법을 선택할 수 있습니다.

1. 웹 팩 설정에서 css/less 파일을 해석하기 위한 두 가지 규칙 세트를 정의합니다.
   • 첫 번째 규칙은 /styles/ 또는 유사한 디렉토리에 보관되어 있다고 가정할 때 모든 글로벌 스타일을 포함해야 합니다.
   • 두 번째 규칙은 모든 로컬 범위 css 스타일을 처리하는 것입니다.이러한 스타일은 컴포넌트 옆에 있는 것이 이상적입니다.
   • 규칙을 정의할 때 포함 및 제외 옵션을 사용하여 이를 수행할 수 있습니다.
   • 또는 명명 규칙을 적용하고 그에 따라 규칙을 작성합니다.예를 들어 모든 css 모듈은 [name]가 됩니다.module.css 및 테스트에서 /.discl을 확인합니다.(less|css)$/ 를 참조해 주세요.

다음은 예를 제시하겠습니다.

      // exclude all global styles for css modules
      {
        test: /\.(less|css)$/,
        exclude: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]'
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      // process global styles without css modules
     {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

2. css/less를 쓸 때는 :local 및 :global을 사용합니다.css 모듈이 네이블로 되어 있는 경우 디폴트로 로컬모드가 됩니다.다음 옵션에서 모드를 지정할 수 있습니다.

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

모드를 글로벌하게 정의할 경우 포함된 모든 css 클래스는 해시 이름으로 대체되지 않고 :local로 지정한 클래스에만 고유 이름이 지정됩니다.예를 들어 다음과 같습니다.

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

3. getLocalIdent 옵션을 사용하여 파일이 css 모듈인지 글로벌인지 확인하는 함수를 정의합니다.이것이 현재 설정에서 사용하고 있는 방법입니다.또한 파일에는 [name]이라는 명명 규칙이 있어야 합니다.module.less(CSS 모듈 및 [name]의 경우)를 선택합니다.일반 파일보다 적습니다.아래의 예를 참조해 주세요.

// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");

// inside webpack rules
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    getLocalIdent: getLocalIdent
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {

    // return local name if it's a global css file
    if (!cssModuleRegex.test(loaderContext.resourcePath)) {
        return localName;
    }

    if (!options.context) {
      // eslint-disable-next-line no-param-reassign
      options.context = loaderContext.rootContext;
    }

    const request = path
      .relative(options.context, loaderContext.resourcePath)
      .replace(/\\/g, '/');

    // eslint-disable-next-line no-param-reassign
    options.content = `${options.hashPrefix + request}+${localName}`;

    // eslint-disable-next-line no-param-reassign
    localIdentName = localIdentName.replace(/\[local\]/gi, localName);

    const hash = loaderUtils.interpolateName(
      loaderContext,
      localIdentName,
      options
    );

    return hash
      .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_$1');
  }

스타일을 글로벌하게 Import할 수 있는 유일한 방법은 특정 경로에 대해서만 다음을 추가하는 것입니다.

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

귀환의 안쪽에서render방법.

그렇지 않으면style태그가 추가된다.<head>스타일은 모든 다음 루트에 적용됩니다.

https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974 에서

스타일을 파일에서 문자열로 가져와 코드를 보다 체계적으로 구성할 수 있습니다.

어플리케이션 전체에 필요한 모든 CSS를 유지할 수 있는 CSS 폴더가 있어야 합니다.예를 들어 모든 컴포넌트의 글꼴사이즈는 20이므로 다음 절차를 따라야 합니다.

• css/scss라는 이름의 개별 폴더를 만듭니다(sss가 권장됩니다).
• 파일 작성name _font.scss.
• 파일을 작성하다name index.scss.
• import _font.scss안에서.index.scss(@import './fonts';).
• 이것을 Import 합니다.index.js기동 파일(import "../scss/index.scss").
• 이제 응용 프로그램 전체에서 css를 사용할 수 있습니다.

이 경우 중복이 발견될 수 있습니다.예를 들어, CSS 컨테이너가 글로벌하게 작성되어 있지만 파일 중 하나에 대해 별도의 컨테이너가 필요합니다.

이 경우는, 이 애플리케이션명의 개별의 css/scss 파일을 다음과 같이 작성합니다.cssname.module.scss)는 다음을 포함해야 합니다..module더 나은 취급을 위해.

이 css를 사용하여 jsx 파일을 Import할 수 있습니다.import Style from './cssname.module.scss')

다음과 같이 사용할 수 있습니다.className= {Style.container}그러나 글로벌 및 로컬 css를 함께 사용하는 경우 npm부터 Classnames를 설치합니다.npm install classNames)

사용방법:

import cn from 'Classnames'
className = {cn(Style.container,"fs-20 text-center")}

여기 fs-20 및 text-center는 일부 파일에 존재하는 글로벌 CSS입니다.

css 모듈을 사용하는 다른 간단한 방법은 다음과 같습니다.

<style jsx global>{`
     .slick-prev:before,
     .slick-next:before {
         color: somecolor;
      }
`}</style>

솔루션 1:

시작점에서 전역 스타일 가져오기:reactapp.
리액트 앱이 있는 곳wrapped루트 컴포넌트에 있습니다.
그럴 수 있다.index.js또는app.js또는index.html

솔루션 2:

사용하다scss작성하다main.scss파일링 및 Import(특히 필요한 기타 모든 것custom scss파일main.scss

언급URL : https://stackoverflow.com/questions/39805537/how-to-apply-global-styles-with-css-modules-in-a-react-app